小程序swiper左右滑动

最新推荐文章于 2025-04-12 14:31:28 发布

岩崎理奈

最新推荐文章于 2025-04-12 14:31:28 发布

阅读量4.3k

点赞数

分类专栏：微信小程序笔记

本文链接：https://blog.youkuaiyun.com/qq_41874847/article/details/85323222

版权

微信小程序笔记专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在小程序中如何实现swiper组件的左右滑动功能。最初设置为禁止滑动，后修改为允许滑动，但遇到swiper current属性问题导致无法滑动。通过将current属性设置为数字并结合JS进行动态赋值，解决了问题。同时强调，为了减少数据重复，使用模板引用scroll-view内的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 选项卡 -->
  <view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">待确认</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">运输中</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待结算</view>
    <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">已完成</view>
    <view class="swiper-tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="clickTab">已取消</view>
  </view>
  <swiper current='{{currentTab}}' style='height:{{scrollHeight}}px' duration="300" bindchange="swiperTab">
  <swiper-item ><scroll-view scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="loadMore">
    <template is="listReceive" data="{{myReceive}}"></template>
  </scroll-view></swiper-item>
  <swiper-item ><scroll-view scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="loadMore">
    <template is="listReceive" data="{{myReceive}}"></template>
  </scroll-view></swiper-item>
  <swiper-item ><scroll-view scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="loadMore">
    <template is="listReceive" data="{{myReceive}}"></template>
  </scroll-view></swiper-item>
  <swiper-item ><scroll-view scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="loadMore">
    <template is="listReceive" data="{{myReceive}}"></template>
  </scroll-view></swiper-item>
  <swiper-item ><scroll-view scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="loadMore">
    <template is="listReceive" data="{{myReceive}}"></template>
  </scroll-view></swiper-item>
   </swiper>
</view>

 data: {
    currentTab: 0,
    isactive: true,
    scrollHeight: 0,
    myReceive:[],
    size: 10,
    pageEnd: false,
    state:'待确认'
  },
//滑动切换
swiperTab:function(e){
    var that = this;
    that.setData({
       currentTab: e.detail.current 
       });
    if (that.data.currentTab == 0) {
      that.data.state = '待确认'
    } else if (that.data.currentTab == 1) {
      that.data.state = '运输中'
    } else if (that.data.currentTab == 2) {
      that.data.state = '待结算'
    } else if (that.data.currentTab == 3) {
      that.data.state = '已完成'
    } else if (that.data.currentTab == 4) {
      that.data.state = '已取消'
    }
    var myReceive = {
      state: that.data.state,
      page: '1',
      size: '10'
    }
    api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET, myReceive, function (res) {
      var datas = res.data.data.items;
      console.log(datas)
      for (let i = 0; i < datas.length; i++) {
        datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])
      }
      that.setData({
        myReceive: datas
      })
    })
    console.log("9ui", that.data.state)
  },
  //点击切换
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
    if (that.data.currentTab == 0) {
      that.data.state = '待确认'
    } else if (that.data.currentTab == 1) {
      that.data.state = '运输中'
    } else if (that.data.currentTab == 2) {
      that.data.state = '待结算'
    } else if (that.data.currentTab == 3) {
      that.data.state = '已完成'
    } else if (that.data.currentTab == 4) {
      that.data.state = '已取消'
    }
    console.log("ffffffffffffffff" + this.data.currentTab)
    var that = this;
    var myReceive = {
      state: that.data.state,
      page: '1',
      size: '10'
    }
    api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET, myReceive, function (res) {
      var datas = res.data.data.items;
      for (let i = 0; i < datas.length; i++) {
        datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])
      }
      that.setData({
        myReceive: datas
      })
      console.log("asfffff", that.data.myReceive)
    })
  },

之前是直接赋值了禁止左右滑动<view class="swiper-tab-item {{currentTab=="待确认"?'active':''}}" data-current="待确认" bindtap="clickTab">待确认</view>.但后来要求可以滑动,我以为把禁止滑动（catchtouchmove='stopTouchMove'）就可以了,但发现api里swiper current属性默认值是0,所以一直滑动不了,后来我就设置为数字了,然后通过js赋值,之前直接赋值,也没用滚动,所以只写一条数据判断不同的状态,然后显示就行了,但左右滚动数据必须在scroll-view里,有几个滚动就要写几个scroll-view,所以数据重复太多,然后我就写在模板里面引用过来了