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

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

查看小程序官方文档
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)
  },

您可能感兴趣的与本文相关的镜像

LobeChat

LobeChat

AI应用

LobeChat 是一个开源、高性能的聊天机器人框架。支持语音合成、多模态和可扩展插件系统。支持一键式免费部署私人ChatGPT/LLM 网络应用程序。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值