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

最新推荐文章于 2023-08-02 17:12:43 发布
最新推荐文章于 2023-08-02 17:12:43 发布
阅读量2.1k 收藏 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
    评论
专栏目录
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
weixin_51002293的博客
11-05 4354
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
微信小程序实现tab和swiper切换结合效果
12-29
本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码，供大家参考，具体内容如下 先上效果图： 实现代码如下： wxml页面 {{item}}
微信小程序swiper+scroll-view实现滑动切换内容
苏苏就是小苏苏的博客
02-27 7584
1.实现效果 2.实现原理 swiper：滑块视图容器。其中只可放置swiper-item组件，设置不同的swiper-item，通过bindchange事件，动态的改变当前选中项，swiper默认高度为150，必须设置相应高度才可。 scroll-view：包裹整个页面，设置scroll-x或scroll-y，改变滚动的方向。 3.实现代码 <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scr
微信小程序实现滑动/点击切换Tab
热门推荐
苏苏就是小苏苏的博客
12-01 1万+
👏 swiper+scroll-view实现滑动/点击切换Tab，以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏！
【微信小程序】 swiper 如何实现页面滑动切换？
神创的博客
02-06 1278
https://www.jianshu.com/p/43d9c7c6d169——如何清空input内容。 完成了 把页面内容都用<swiper></swiper>包起来 内部再包裹<swiper-item></swiper-item>里面 然后多两个<swiper-item></swiper-item>，就...
微信小程序选项卡切换（滑动切换，点击切换）
qq_38110572的博客
08-02 5515
【代码】微信小程序选项卡切换（滑动切换，点击切换）
微信小程序实现点击导航条切换页面
01-21
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码，供大家参考，具体内容如下 我录制了个gif如下，黄色部分是不可以滑动的，蓝色部分可以滑动。 代码解说： 首先我在js自定义了navState参数用于...
微信小程序 仿美团菜单 swiper分类菜单 下载
01-15
在微信小程序中，`swiper`组件是一个轮播图组件，常用于展示多张图片或卡片式的切换效果，可以用来实现动态滑动展示不同的分类菜单。在仿美团菜单的场景中，`swiper`通常会结合`swiper-item`组件一起使用，每个`...
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
10-15
微信小程序是一种轻量级的应用开发平台，它允许开发者快速构建具有原生体验的移动应用。在微信小程序中，滑块视图容器（Swiper）和导航是常见的交互元素，尤其适用于展示多个页面或内容区域。本篇文章将详细讲解如何...
微信小程序swiper(实现轮播图效果)
12-14
在微信小程序中，`swiper`组件是用于实现滑动切换效果的关键元素，常用于创建轮播图，这种效果在网页和移动应用设计中非常常见，能有效地展示多张图片或内容。 `swiper`组件的使用主要包括以下几个方面： 1. **...
微信小程序滚动Tab实现左右可滑动切换
12-10
微信小程序滚动Tab实现左右可滑动切换 效果： 最终效果如上。问题： 1、tab标题总共8个，所以一屏无法全部显示。 2、tab内容区左右滑动切换时，tab标题随即做标记（active）。 3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。 一、wxml结构 tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。 tab内容可左右滑动切换，使用swiper组件实现 为了偷懒，所以数据都通过wx:for遍历重复出来。 说明： 1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.c
基于微信小程序的仿腾讯视频小程序.zip
最新发布
10-11
微信小程序，作为移动端轻量级的应用形态，以其无需下载、即用即走的特点，深受开发者和用户的喜爱。本教程将深入探讨如何利用微信小程序框架，构建一个类似腾讯视频的小程序，提供丰富的视频内容浏览与播放功能。 ...
微信小程序 navigator 组件实例详解
09-01
在微信小程序开发中，navigator组件是一个至关重要的部分，它负责页面间的跳转。navigator组件提供了两种不同的跳转方式，一种是关闭当前页面后跳转到新页面，另一种是在当前页面的基础上打开新的页面，不关闭当前...
Swiper组件在微信小程序开发中的应用研究.zip
10-16
Swiper组件是微信小程序开发中一个非常重要的组件，主要用于实现页面滑动切换的效果，常见于轮播图、产品展示等场景。本研究将深入探讨Swiper组件的基本使用方法、高级特性以及在实际项目中的应用策略。 一、Swiper...
微信小程序－生鲜商城
10-25
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。它允许开发者通过一套特定的编程语言和框架，快速构建能在微信内运行的小型应用程序。在这个名为“微信小程序－生鲜商城”的项目中，...
小程序实现页面多级来回切换支持滑动和点击操作
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-07 2957
想留住粉丝，就必须安排演示： [审核中…]然后开摆！！！！首先通过swiper创建一个简单的多tab页面 通过触发pagechange1方法中的事件对currentIndex来进行赋值，又通过currentIndex的改变使前端wxml对应更改，这个部分对滑动和点击的操作都一样，无非就是使currentIndex对应到各自的位置，通过数字来决定位置 这个部分完整代码如下： wxml wxss js 上一步完成后，下级页面再加一个滑动页面，当内切换结束后，在做切换就是父级的切换操作 在“内容1”的vie
小程序swiper带切换按钮
ybyshezhang的博客
02-28 875
小程序
web前端之微信小程序实现左右滑动触发内容和选项卡联动切换、createSelectorQuery、findIndex、selectAll、parseInt、String、Math、push、abs
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
01-07 2213
web前端之微信小程序实现左右滑动触发内容和选项卡联动切换、createSelectorQuery、findIndex、selectAll、parseInt、String、Math、push、abs
小程序swiper从左向右和从上往下滑动--只支持自动滑动
zuyingan3447的博客
06-14 1791
其实原理就是css控制翻转180°，所以不支持手动滑动，手动滑动会是反的。
微信小程序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、付费专栏及课程。

余额充值