微信小程序滑動菜單

好久沒發博客了，發一條給2024打個卡

新手入坑小程序，網上沒找到類似的示例，自己整了一個。愛掏網 - it200.com多功能滑動展示

swiper class="navban" interval="{{interval}}" duration="{{duration}}" current="{{swiperCurrent}}" indicator-dots="{{indicatorDots}}" indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" style="z-index:1000">
  swiper-item>
    block wx:for="{{scrollOne}}" wx:key="key">
      view class=‘fl_right‘ hover-class="none" bindtap="gotoPage" data-path="{{item.url}}">
        view class="swiper-box">
          image class="navimg" src="{{item.icon}}">image>
          text class="navtext">{{item.text}}text>
        view> 
      view>
    block>
  swiper-item>

  swiper-item>
    view class=‘fl_right‘ hover-class="none" wx:for="{{scrollTwo}}" wx:for-item="twoItem" bindtap="gotoPage" data-path="{{twoItem.url}}" wx:key="{{twoItem.url}}">
      view class="swiper-box">
        image class="navimg" src="{{twoItem.icon}}">image>
        text class="navtext">{{twoItem.text}}text>
      view> 
    view>
  swiper-item>

  swiper-item>
    view class=‘fl_right‘ hover-class="none" wx:for="{{scrollThree}}" wx:for-item="threeItem" wx:key="{{threeItem.url}}"
    bindtap="gotoPage" data-path="{{threeItem.url}}">
      view class="swiper-box">
        image class="navimg" src="{{threeItem.icon}}">image>
        text class="navtext">{{threeItem.text}}text>
      view> 
    view>
  swiper-item>
swiper>

view class="dots">
  block wx:for="{{list_image}}" wx:key="unique">
    view class="dot{{index == swiperCurrent ? ‘ active‘ : ‘‘}}">view>
  block>
view>

// pages/scrollMenu/scrollMenu.js
Page({

  data: {
    indicatorDots: true,//顯示面板指示點
    beforeColor: "#DCDCDC",//指示點顏色
    afterColor: "#FF7a8f",//當前選中的指示點顏色
    duration: 500,
    swiperCurrent: 0,

    // 滑動菜單數據
    scrollOne: [
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../dev/dev‘      
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第一頁‘,
        ‘url‘: ‘../guide/guide‘
      },
    ],
    scrollTwo: [
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第二頁‘,
        ‘url‘: ‘../dev/dev‘
      },
    ],
    scrollThree: [
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
      {
        ‘icon‘: ‘/assets/all_second_img27.png‘,
        ‘text‘: ‘第三頁‘,
        ‘url‘: ‘../dev/dev‘
      },
    ],
  },
})

/* pages/scrollMenu/scrollMenu.wxss */
page{
  background-color: #f4f4f4;
  margin-bottom: 50rpx;
  height: 100%;
  width:100%;
  overflow-x: hidden;
}
.font_28{
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.font_22{
  font-size: 22rpx;
  color: #858585;
}
.mt_20{
  margin-top: 25rpx;
  margin-bottom: 7rpx;
}
.mt_5{
  position: relative;
  top: -5rpx;
}
.navban{
  background-color: white;
}
.fl_right{
  float: left;
  width: 25%;
  margin-top: 10rpx;
}
.navban{
  width: 100%;
  height: 400rpx;
  margin: 0 auto;
  margin-top: 15rpx;
}
.navban .swiper-box{
  height: 150rpx;
  border-bottom: 1px solid #f4f4f4;
}
.navban .navimg{
  width: 80rpx;
  height: 80rpx;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 15rpx;
}
.navban .navtext{
  font-size: 26rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 15rpx;
}
.navimg{
  width: 42rpx;
  height: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.second-boxs .navtext{
  font-size: 26rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 15rpx;
}

微信小程序滑動菜單