微信小程序有关swiper组件的修改current的值

最新推荐文章于 2025-05-31 20:13:02 发布

xyl_hq

最新推荐文章于 2025-05-31 20:13:02 发布

阅读量1.2w

点赞数

CC 4.0 BY-SA版权

分类专栏：接口文章标签：微信小程序 swiper current

本文链接：https://blog.youkuaiyun.com/xiaxia_Lin/article/details/101016140

接口专栏收录该内容

11 篇文章

订阅专栏

在微信小程序项目中，作者遇到使用swiper组件时的问题。当用户点击分类切换服务项目时，如果滑动到某个没有对应数据的swiper页，页面会显示空白。为解决这个问题，作者发现swiper组件提供了current属性，可以通过设置这个属性使swiper在点击分类时返回第一页，避免显示空白。建议在遇到类似问题时，查阅官方文档寻找解决方案。

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

查看小程序官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
在这里插入图片描述
做项目时遇到一个问题：
情景：刚进入页面时显示所有服务项目,当点击一个分类时获取这个分类下的服务项目，服务项目显示在swiper组件上。
问题是:当我滑动到第2页上的时候，点击了一个分类，滑块上显示空白，原因是当前所在滑块的 index索引值上没有数据了，那么我的想法是:当我每次点击的时候直接让swiper回到第一页，就不会出现这种情况了，找了很久，才发现swiper组件本身就有current属性。所以遇到问题还是的多多看官方文档
贴上我的代码如下

 <swiper bindchange="moveServerProSwiper" current="{{swiperIndex}}" class="serviceSwiper" style="margin-top:3%;">
        <block  wx:for="{{imgs}}" wx:for-index="index" wx:key="swiperItem" wx:for-item="eachItem" >
          <swiper-item class="swiper-items"  >
            <view >
           <!-- 服务项目开始 -->
            <view class="cu-list menu-avatar" wx:for="{{eachItem}}" wx:key="" >
              <view class="cu-item  itemOne" style="margin-top:-1%;">
                <view data-serviceid="{{item['ServiceId']}}" bindtap="gotoServiceProDesc" class="flex-sub margin-xs secimg" style="margin-left:3%;">
                  <image src="{{webRoot}}/static/images/index/test1.jpg"/>
                </view>
                <view class="content" data-serviceid="{{item['ServiceId']}}" bindtap="gotoServiceProDesc">
                  <view class="text-gray text-sm flex">
                    <text class="text-black itemTitle text-xl">{{item['ServiceName']}}</text>
                  </view>
                  <view class="text-gray text-sm flex">
                    <text class="text-black experice text-sm">{{item['ServiceSub']}}</text>
                  </view>
                  <view class="text-gray text-sm flex">
                    <text class="text-black textBig text-xl text-bold">￥{{item['Price_Min']}}</text><text class="text-black textBigOne text-xl">元</text><text class="text-black minute text-lg">约{{item['Duration']}}分钟</text>
                  </view>
                </view>
                <view class="action">
                  <view class="text-black text-xl"><text class="cuIcon-delete"></text></view>  
                </view>
              </view>
            </view>
              <!-- 服务项目结束 -->
           </view>
          </swiper-item>
        </block>     
</swiper>

// js服务项目的滑块 /点击事件
  changeMainCat(e) {
    var that=this;
    var seq = e.currentTarget.dataset.seq;
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60,
      currentSelectCat: seq,
      swiperIndex:0 ///////点击的时候直接回到第一页
    })
    
    console.log(this.data.TabCur);    
    console.log(seq);
     
        
    //通过当前的大分类顺序获取对应的服务项目
    that.getFirmService();
  },
   //滑块滑动
  moveServerProSwiper:function(e){
    console.log("---")
    console.log(e)
  
    console.log(e.detail.current)
    var that=this;
    that.setData({
      swiperIndex: e.detail.current,
     
    })
    console.log("----当前滑快的位置=" + that.data.swiperIndex)
  },