微信小程序中 使用swiper 滑动切换一级、二级导航

最新推荐文章于 2023-11-05 19:36:07 发布
最新推荐文章于 2023-11-05 19:36:07 发布
阅读量2.2k 收藏 8
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55969466/article/details/128952379
版权

其中遇到一个大问题使我放弃了swiper的使用，swiper有一个固定高度不太好处理，最终使用了touch事件去处理触摸移动，之后会再写一篇文章记录，处理不复杂的话还是可以用swiper的

一、示例图

效果根据手指滑动切换二级导航、二级切换完成切换一级导航

 

二、page代码

（1）wxml

<!--pages/demo/demo.wxml-->
<header></header>
<tabList tabParams="{{tabParams}}" tabList="{{tabList}}" bindchangeTab="changeTab"></tabList>
<!-- 滑动切换导航 -->
<view class="page-section page-section-spacing swiper">    
  <view style="text-align: center;padding: 20rpx;">
    当前部分滑动页面 导航切换
  </view>
  <swiper
    bindtransition="changeIndicatorDots"
    style="height: 300px;"
    indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
    interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
    <block wx:for="{{background}}" wx:key="*this">
      <swiper-item data-id="01">
        <!-- <view class="swiper-item ">{{item}}</view> -->
        <!--  -->
        <view  data-id="0" style="padding: 0px 0px;margin: 0px 15rpx 20rpx;background-color: #ffffff;width: 100%;">
          <scroll-view scroll-x="true"style="padding: 0px 10px;" class="ip_tab_comtainers" scroll-with-animation="{{true}}" scroll-left="{{navScrollLeft}}">
            <block wx:for="{{TypeLists}}" wx:for-item="item" wx:ky = "*this" wx:for-index = "index">
              <view class="ip_tab_item_n" style="height: 30px;line-height: 40px;"  data-type="{{item.posterId}}" data-index="{{index}}">{{item.typeDesc}}
              </view>
            </block>
          </scroll-view>
        </view>
        <view data-id="1" style="padding: 0px 0px;margin: 0px 15rpx 20rpx;background-color: #ffffff;width: 100%;">
          <scroll-view scroll-x="true"style="padding: 0px 10px;" class="ip_tab_comtainers" scroll-with-animation="{{true}}" scroll-left="{{navScrollLeft}}">
            <block wx:for="{{TypeLists}}" wx:for-item="item" wx:ky = "*this" wx:for-index = "index">
              <view class="ip_tab_item_n" style="height: 30px;line-height: 40px;"  data-type="{{item.posterId}}" data-index="{{index}}">{{item.typeDesc}}
              </view>
            </block>
          </scroll-view>
        </view>
        <view data-id="2" style="padding: 0px 0px;margin: 0px 15rpx 20rpx;background-color: #ffffff;width: 100%;">
          <scroll-view scroll-x="true"style="padding: 0px 10px;" class="ip_tab_comtainers" scroll-with-animation="{{true}}" scroll-left="{{navScrollLeft}}">
            <block wx:for="{{TypeLists}}" wx:for-item="item" wx:ky = "*this" wx:for-index = "index">
              <view class="ip_tab_item_n" style="height: 30px;line-height: 40px;"  data-type="{{item.posterId}}" data-index="{{index}}">{{item.typeDesc}}
              </view>
            </block>
          </scroll-view>
        </view>
        <view  data-id="3" style="padding: 0px 0px;margin: 0px 15rpx 20rpx;background-color: #ffffff;width: 100%;">
          <scroll-view scroll-x="true"style="padding: 0px 10px;" class="ip_tab_comtainers" scroll-with-animation="{{true}}" scroll-left="{{navScrollLeft}}">
            <block wx:for="{{TypeLists}}" wx:for-item="item" wx:ky = "*this" wx:for-index = "index">
              <view class="ip_tab_item_n" style="height: 30px;line-height: 40px;"  data-type="{{item.posterId}}" data-index="{{index}}">{{item.typeDesc}}
              </view>
            </block>
          </scroll-view>
        </view>
      </swiper-item>
    </block>
  </swiper> 
  <view  style="text-align: center;padding: 20rpx;">
    当前部分滑动页面 导航不切换
  </view>     
  <view  data-id="0" style="padding: 0px 0px;margin: 0px 15rpx 20rpx;background-color: #ffffff;width: 100%;">
    <scroll-view scroll-x="true"style="padding: 0px 0px;" class="ip_tab_comtainers" scroll-with-animation="{{true}}" scroll-left="{{navScrollLeft}}">
      <block wx:for="{{TypeLists}}" wx:for-item="item" wx:ky = "*this" wx:for-index = "index">
        <view class="ip_tab_item_n" style="height: 30px;line-height: 40px;"  data-type="{{item.posterId}}" data-index="{{index}}">{{item.typeDesc}}
        </view>
      </block>
    </scroll-view>
  </view>
</view>

（2）js

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // tab选项
    tabParams:{
      chooseCurrent: 0,  //默认一级导航id
      chooseCurrentTabFirst: 1, //当前导航(一级)下标
      chooseCurrentSecond: 0, //默认二级导航id
      chooseCurrentTabSecond: 1, //当前导航(二级)下标
    },
    tabList:[
      {'title':'一级tab1',id:'1',prvId:'',nextId:'2',childList:[
        {'title':'二级tab1',id:'1',prvId:'',nextId:'2',},
        {'title':'二级tab2',id:'2',prvId:'1',nextId:'3',},
        {'title':'二级tab3',id:'3',prvId:'2',nextId:'',},
      ]},
      {'title':'一级tab2',id:'2',prvId:'1',nextId:'3',childList:[
        {'title':'二级tab1',id:'1',prvId:'',nextId:'2',},
        {'title':'二级tab2',id:'2',prvId:'1',nextId:'3',},
        {'title':'二级tab3',id:'3',prvId:'2',nextId:'4',},
        {'title':'二级tab4',id:'4',prvId:'3',nextId:'',},
      ]},
      {'title':'一级tab3',id:'3',prvId:'2',nextId:'4',childList:[
        {'title':'二级tab1',id:'1',prvId:'',nextId:'2',},
        {'title':'二级tab2',id:'2',prvId:'1',nextId:'3',},
        {'title':'二级tab3',id:'3',prvId:'2',nextId:'4',},
        {'title':'二级tab4',id:'4',prvId:'3',nextId:'',},
      ]},
      {'title':'一级tab4',id:'4',prvId:'3',nextId:'',childList:[
        {'title':'二级tab1',id:'1',prvId:'',nextId:'2',},
        {'title':'二级tab2',id:'2',prvId:'1',nextId:'3',},
        {'title':'二级tab3',id:'3',prvId:'2',nextId:'4',},
        {'title':'二级tab4',id:'4',prvId:'3',nextId:'',},
      ]},
    ],//tab导航
    // 模拟滑动页面 切换导航
    openNum:true,
    spedNum:30,//滑动距离
    background: ['demo-text-1'],
    indicatorDots: false,
    vertical: false,
    autoplay: false,
    circular: false,
    interval: 2000,
    duration: 300,
    previousMargin: 0,
    nextMargin: 0,
    TypeLists: [
      {posterId: 10561005, typeDesc: "央视网"},
      {posterId: 10561003, typeDesc: "爱奇艺"},
      {posterId: 10561008, typeDesc: "腾讯视频"},
      {posterId: 10561010, typeDesc: "PPTV"},
      {posterId: 10561002, typeDesc: "优酷"},
      {posterId: 10561007, typeDesc: "哔哩哔哩"}, 
      {posterId: 10561006, typeDesc: "芒果TV"}, 
      {posterId: 10561005, typeDesc: "央视网"},
      {posterId: 10561003, typeDesc: "爱奇艺"},
      {posterId: 10561008, typeDesc: "腾讯视频"},
      {posterId: 10561010, typeDesc: "PPTV"},
      {posterId: 10561002, typeDesc: "优酷"},
      {posterId: 10561007, typeDesc: "哔哩哔哩"}, 
      {posterId: 10561006, typeDesc: "芒果TV"}, 
      {posterId: 10561004, typeDesc: "西瓜视频"}
    ],   //导航栏假数据
  },

  // 点击tab切换更新请求
  changeTab(e){
    console.log(e)
    let params = e.detail;//获取点击tab后获取导航（一级和二级id）
    // let type = params.type;//当前点击导航级别  1 代表一级
    // let id = params.id;//当前点击导航id
    // let index = params.index;//当前点击导航 index
    // if(type==1){
      this.setData({
        'tabParams.chooseCurrent':params.chooseCurrent,
        'tabParams.chooseCurrentTabFirst':params.chooseCurrentTabFirst,
        'tabParams.chooseCurrentTabSecond':params.chooseCurrentTabSecond,
        'tabParams.chooseCurrentSecond':params.chooseCurrentSecond,
      })
    // }else{
    //   this.setData({
    //     'tabParams.chooseCurrentTabSecond':id,
    //     'tabParams.chooseCurrentSecond':index
    //   })
    // }
  },
  // 滑动页面切换导航
  
  changeProperty: function (e) {
    console.log('changeProperty')
    // console.log(e)
    var propertyName = e.currentTarget.dataset.propertyName
    var newData = {}
    newData[propertyName] = e.detail.value
    this.setData(newData)
  },
  changeIndicatorDots: function (e) {
    // console.log('changeIndicatorDots')
    // console.log(e)
    // 判断左滑还是右滑
    let currentItem = this.data.tabList[this.data.tabParams.chooseCurrent];
    let currentSecondItem = this.data.tabList[this.data.tabParams.chooseCurrent].childList[this.data.tabParams.chooseCurrentSecond];
    // let openNum = true
    if(e.detail.dx == 0){
      this.setData({
        openNum:true,
      })
    }
    // 左滑
    if(e.detail.dx > 0 && e.detail.dx > this.data.spedNum && this.data.openNum ){
      // openNum = false
    console.log(e.detail.dx)
    console.log(this.data.tabParams.chooseCurrent)
      this.setData({
        openNum:false,
      })
      // 左滑
      // 先判断二级是否是最后一个
      if(this.data.tabParams.chooseCurrentSecond < this.data.tabList[this.data.tabParams.chooseCurrent].childList.length-1){
        this.setData({
          'tabParams.chooseCurrentSecond':this.data.tabParams.chooseCurrentSecond+1,
        })
        this.setData({
          'tabParams.chooseCurrentTabSecond': this.data.tabList[this.data.tabParams.chooseCurrent].childList[this.data.tabParams.chooseCurrentSecond].id,
        })
      }else{
        // 如果二级是最后一个 判断 一级是否是最后一个
        if(this.data.tabParams.chooseCurrent < this.data.tabList.length-1){
          this.setData({
            'tabParams.chooseCurrent':this.data.tabParams.chooseCurrent+1,
          })
          this.setData({
            'tabParams.chooseCurrentTabFirst':this.data.tabList[this.data.tabParams.chooseCurrent].id,
            'tabParams.chooseCurrentTabSecond':this.data.tabList[this.data.tabParams.chooseCurrent].childList[0].id,
            'tabParams.chooseCurrentSecond':0
          })
        }
      }
    }
    // 右滑
    if(e.detail.dx < 0 && e.detail.dx < this.data.spedNum*-1 && this.data.openNum ){
      // openNum = false
    console.log(e.detail.dx)
    console.log(this.data.tabParams.chooseCurrent)
      this.setData({
        openNum:false,
      })
      // 右滑
      // 先判断二级是否是第一个
      if(this.data.tabParams.chooseCurrentSecond !=0){
        this.setData({
          'tabParams.chooseCurrentSecond':this.data.tabParams.chooseCurrentSecond-1,
        })
        this.setData({
          'tabParams.chooseCurrentTabSecond': this.data.tabList[this.data.tabParams.chooseCurrent].childList[this.data.tabParams.chooseCurrentSecond].id,
        })
      }else{
        // 如果二级是第一个 判断 一级是否是第一个
        if(this.data.tabParams.chooseCurrent !=0){
          this.setData({
            'tabParams.chooseCurrent':this.data.tabParams.chooseCurrent-1,
          })
          this.setData({
            'tabParams.chooseCurrentTabFirst':this.data.tabList[this.data.tabParams.chooseCurrent].id,
            'tabParams.chooseCurrentTabSecond':this.data.tabList[this.data.tabParams.chooseCurrent].childList[0].id,
            'tabParams.chooseCurrentSecond':0
          })
        }
      }
    }
    // this.setData({
    //   indicatorDots: !this.data.indicatorDots
    // })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  },
  // end
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

（3）wxss

/* pages/demo/demo.wxss */
/* @import "./weui.wxss"; */

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}
.page-body{
  padding-top: 60rpx;
  width: 100%;
}
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 200rpx 80rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}

.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}
.ip_tab_comtainers {
  width: 100%;
  display: flex;
  /* position:fixed; */
  margin-bottom: 6rpx;
  white-space: nowrap;
  background-color: #ffffff;
}
.ip_tab_item_n {
  display: inline-block;
  margin: 0rpx 25rpx 0rpx 25rpx;
  padding: 28rpx 0rpx 20rpx 0rpx;
  color: #666666;
  font-size: 32rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

（4）json 

{ 
  "navigationStyle": "custom",
  "usingComponents": {
    "tabList" : "../../components/tabList/tabList",
  }
}

三、tab组件代码

（1）wxml

<!--components/tabList/tabList.wxml-->
<cover-view class="tabWarp" style="top:{{navigationBarAndStatusBarHeight}};{{tabList[tabParams.chooseCurrent].childList&&tabList[tabParams.chooseCurrent].childList.length<=1?'height:96rpx':''}}">
  <!-- tab导航部分 ： 一级导航 -->
  <cover-view class="tabFirst">
    <cover-view class="first" wx:for="{{tabList}}"  wx:for-item="item" wx:key = "index" wx:for-index = "index">
      <cover-view class="ip_tab_item_n" class="classItem {{tabParams.chooseCurrentTabFirst == item.id?'chooseActive':''}}" catchtap="changeTab"  data-type="1" data-id="{{item.id}}" data-index="{{index}}">
        {{item.title}}
        <cover-view class="{{tabParams.chooseCurrentTabFirst == item.id?'chooseActiveLine':'noActiveLine'}}"> </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
  <!-- tab导航部分 ： 二级导航 -->
  <cover-view class="tabSecond" wx:if="{{tabList[tabParams.chooseCurrent].childList&&tabList[tabParams.chooseCurrent].childList.length>1}}">
    <cover-view wx:for="{{tabList[tabParams.chooseCurrent].childList}}" wx:for-item="item" wx:key = "index" wx:for-index = "index">
      <cover-view class="ip_tab_item_n" class="classItem {{tabParams.chooseCurrentTabSecond == item.id?'chooseActive':''}}" catchtap="changeTab"   data-type="2" data-id="{{item.id}}" data-index="{{index}}">{{item.title}}</cover-view>
    </cover-view>
  </cover-view>
</cover-view>

（2）js

// components/tabList/tabList.js
Component({
  options: {
      multipleSlots: true // 启用插槽
  },
  /**
   * 组件的属性列表
   */
  properties: {
    tabParams:{
      type: Object,
      value:{
        // chooseCurrent: 0,  //默认一级导航id
        // chooseCurrentTabFirst: 1, //当前导航(一级)下标
        // chooseCurrentSecond: 0, //默认二级导航id
        // chooseCurrentTabSecond: 1, //当前导航(二级)下标
      }
    },
    tabList:{
      type: Array,
      value:[]
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    // chooseCurrentTabFirst:1,//默认一级导航
    // chooseCurrentTabSecond:1,//默认二级导航
    // chooseCurrent:0,//当前导航
    // chooseCurrentSecond:0,//当前导航(二级)下标
    navigationBarAndStatusBarHeight:''
  },

  /**
   * 组件的方法列表
   */
  methods: {
  // 点击导航切换
  changeTab(e){
    // console.log(e)
    let type = e.currentTarget.dataset.type;//当前点击导航级别  1 代表一级
    let id = e.currentTarget.dataset.id;//当前点击导航id
    let index = e.currentTarget.dataset.index;//当前点击导航 index
    if(type==1){
      this.setData({
        'tabParams.chooseCurrent':index,
        'tabParams.chooseCurrentTabFirst':id,
        'tabParams.chooseCurrentTabSecond':this.data.tabList[index].childList[0].id,
        'tabParams.chooseCurrentSecond':0
      })
    }else{
      this.setData({
        'tabParams.chooseCurrentTabSecond':id,
        'tabParams.chooseCurrentSecond':index
      })
    };
    // 
    this.triggerEvent('changeTab',this.data.tabParams)
  },
  },
  lifetimes:{
    attached(){
      var navigationBarAndStatusBarHeight=(wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight'))+'px'
      this.setData({
        navigationBarAndStatusBarHeight
      })
    }
  }
})

（3）wxss

/* components/tabList/tabList.wxss */
.tabWarp{height:200rpx;box-sizing: border-box;position: fixed;top: 0rpx;left: 0rpx;width: 100%;z-index: 888;background-color: #ffffff;}
.tabWarp .tabFirst{display: flex;font-size: 30rpx;color: #333;font-weight: 500;text-align: center;background-color: #ffffff;margin-bottom: 20rpx;}
.tabWarp .tabFirst .classItem{flex: 1;text-align: center;padding: 26rpx 0rpx;position: relative; margin-left: 68rpx;}
.tabWarp .tabFirst .first:first-child .classItem{margin-left: 34rpx !important}
.tabWarp .tabFirst .chooseActive{color: #556FFD;}
.chooseActiveLine{position: absolute;left: 20%;bottom: 0rpx;width: 60%;border-bottom: 4rpx solid #556FFD;}
.tabWarp .tabSecond{display: flex;font-size: 28rpx;color: #333;font-weight: 400;text-align: center;background-color: #ffffff;margin-bottom: 20rpx;}
.tabWarp .tabSecond .classItem{display: inline-block;padding: 12rpx 24rpx;border-radius: 8rpx;background-color: #EAEDFF;color: #949AB7;font-size: 28rpx;margin-left: 16rpx;}
.tabWarp .tabSecond .chooseActive{color: #fff;background-color: #556FFD;}

（4）json

{
  "component": true,
  "usingComponents": {}
}

四、问题总结

其中遇到一个大问题使我放弃了swiper的使用，其中就是swiper有一个固定高度不太好处理，最终使用了touch事件去处理触摸移动，之后会再写一篇文章记录

小任同学`
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
小程序swiper带切换按钮
ybyshezhang的博客
02-28 878
小程序
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
kingAn123的博客
05-05 9005
文章目录效果图一、顶部标签栏二、列表内容部分swiper组件高度及上下滚动样式三、数据结构及赋值方法四、scroll组件触底事件(分页相关五、scroll组件的高度样式swiper组件scroll组件样式区别六、其他 效果图 一、顶部标签栏 定位顶部便签栏，使用color-ui的组件样式实现 <scroll-view scroll-x class="bg-white nav my-...
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
最新发布
weixin_51002293的博客
11-05 4398
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
微信小程序实现滑动/点击切换Tab
苏苏就是小苏苏的博客
12-01 1万+
👏 swiper+scroll-view实现滑动/点击切换Tab，以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏！
小程序实现页面多级来回切换支持滑动和点击操作
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-07 2960
想留住粉丝，就必须安排演示： [审核中…]然后开摆！！！！首先通过swiper创建一个简单的多tab页面 通过触发pagechange1方法中的事件对currentIndex来进行赋值，又通过currentIndex的改变使前端wxml对应更改，这个部分对滑动和点击的操作都一样，无非就是使currentIndex对应到各自的位置，通过数字来决定位置 这个部分完整代码如下： wxml wxss js 上一步完成后，下级页面再加一个滑动页面，当内切换结束后，在做切换就是父级的切换操作 在“内容1”的vie
微信小程序选项卡页面切换
用心创作每一篇文章
01-05 1887
选项卡效果切换如下：滑动即可对应切换。
微信小程序实现点击导航条切换页面
01-21
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码，供大家参考，具体内容如下 我录制了个gif如下，黄色部分是不可以滑动的，蓝色部分可以滑动。 代码解说： 首先我在js自定义了navState参数用于...
微信小程序 仿美团菜单 swiper分类菜单 下载
01-15
在微信小程序中，`swiper`组件是一个轮播图组件，常用于展示多张图片或卡片式的切换效果，可以用来实现动态滑动展示不同的分类菜单。在仿美团菜单的场景中，`swiper`通常会结合`swiper-item`组件一起使用，每个`...
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
10-15
微信小程序是一种轻量级的应用开发平台，它允许开发者快速构建具有原生体验的移动应用。在微信小程序中，滑块视图容器（Swiper）和导航是常见的交互元素，尤其适用于展示多个页面或内容区域。本篇文章将详细讲解如何...
微信小程序swiper(实现轮播图效果)
12-14
在微信小程序中，`swiper`组件是用于实现滑动切换效果的关键元素，常用于创建轮播图，这种效果在网页和移动应用设计中非常常见，能有效地展示多张图片或内容。 `swiper`组件的使用主要包括以下几个方面： 1. **...
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
10-15
主要介绍了微信小程序swiper组件实现抖音翻页切换视频功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
基于微信小程序的仿腾讯视频小程序.zip
10-11
微信小程序，作为移动端轻量级的应用形态，以其无需下载、即用即走的特点，深受开发者和用户的喜爱。本教程将深入探讨如何利用微信小程序框架，构建一个类似腾讯视频的小程序，提供丰富的视频内容浏览与播放功能。 ...
微信小程序 导航tabBar切换 滑动效果
孤单的时候狗作陪！的博客
01-16 1084
效果图 .wxml <!-- nav导航 --> <view class="goods"> <block wx:for="{{tab}}" wx:key="key"> <view class="{{item.style}}" bindtap="tarClick" data-index="{{index}}">{{item.titcle}}</view> </block> </view> ..
【微信小程序】实现页面tab切换效果
yzq0820的博客
09-23 6285
本次主要内容是介绍页面tab的开发，如何实现tab与页面内容联动呢？关注我就知道！本次效果展示。这里有一个大坑，不管是使用scroll-x还是scroll-y遍历数据都是出现在左边一数列（这里我们只关注scroll-x、scroll-y）
小程序 · 轮播图——上下滚动消息、禁止滑动
weixin_42091247的博客
10-14 2220
swiper禁止滑动的方法 方法一：在swiper-item增加一个catchtouchmove方法 wxml： <swiper-item catchtouchmove=“stopTouchMove”> </swiper-item> js： stopTouchMove: function() { return false; } 方法二：在navigator里边加上一个view将他定位变成一个透明的遮罩层 <view class="page-body">
微信小程序分页效果实现
阵雨的博客
12-13 9876
index.js // pages/bianmin/bianmin.js var p = 0 var GetList = function (that) { wx.request({ url: url, method: "POST", data: { page: p }, header: { 'content-type': 'a
《微信小程序》swiper的疯狂循环滚动的问题
Ammyo_o的博客
09-14 5741
使用微信小程序的swiper制作banner的时候，发现一开始能够自动滚动，但是让小程序后台运行一会儿之后再进去就会出现疯狂快速滚动的问题。 上面的城市和银行数据是同步滚动的，城市的滚动是通过scroll-view来实现的，为了实现同步滚动我用了swiper的current属性来控制scroll-view的样式为选中。 &lt;scroll-view class="coopera...
修改微信小程序swiper点点点的层级以及样式或者定位
weixin_43923808的博客
06-17 811
1.修改层级 2.自定义点点样式效果图如下：
微信小程序swiper滑动页面实践-类似于安卓ViewPager
热门推荐
邵磊的博客
05-02 1万+
一言不合，上效果 效果二 效果三 效果四
微信小程序swiper滑动
07-28
微信小程序中的swiper组件可以实现滑动效果。你可以在wxml文件中添加以下代码来创建一个swiper组件： ```html <swiper indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" interval="{{5000}}" duration="{{500}}"> <swiper-item> <!-- 第一个滑块内容 --> </swiper-item> <swiper-item> <!-- 第二个滑块内容 --> </swiper-item> <swiper-item> <!-- 第三个滑块内容 --> </swiper-item> </swiper> ``` 在上面的代码中，我们创建了一个包含三个swiper-item的swiper组件。你可以根据需要添加更多的swiper-item。indicator-dots属性用于显示指示点，autoplay属性用于自动播放，circular属性用于开启循环播放，interval属性用于设置自动切换的时间间隔，duration属性用于设置切换动画的时长。 你可以根据实际需求修改这些属性，并在每个swiper-item中添加相应的内容。这样就可以实现一个基本的swiper滑动效果了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值