微信小程序 有关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)
  },
《微信小程序开发从入门到实战》学习九十三 rgba后面括号中的四个数字分别表示red、green、blue和alpha的值,前三个值即颜色的RGB数值,取值范围是0~255,对应十六进制的00~FF。Alpha的值表示的是颜色的透明度,它的取值范围是0~1的小数,从0到1表示透明度从完全透明逐渐变为不透明。如果将current的值设定为一个固定的数值,则该值表示swiper显示的初始滑块的序号。如果将current的值设定为一个变量,则当变量的值改变时,swiper显示的滑块也会随之切换(之前还以为index是指位置,原来是滑块序号索引) 阅读详情

相关推荐

微信小程序observers属性监听器 swiper 实现相册组件 类似 slideTo 定位到指定页功能

微信小程序observers属性监听器 Component({ properties: { // 这里定义了innerText属性,属性值可以在组件使用时指定 }, data: { // 这里是一些组件内部数据 //content: 'sdcedc', //主件的数据显示权比behavior高 amount: 1, price: 2, p...

夜阑珊妖妖 981

微信小程序swiper组件常见问题及解决方法

传送门:小程序swiper组件官方文档 整理微信小程序swiper组件使用中遇到的一些问题及其解决方法: 1、swiper轮播图图片高度自适应 描述: swiper组件有个默认高度150px,有时候做轮播图特效时要求图片高度能自适应,而不是写死的宽高。 解决方法: 首先给image标签设置mode=“widthFix”,然后绑定bindload事件,然后在事件方法里通过e.detail.width和e.detail.height获取图片宽高,获取swiper容器元素的宽度,计算出自适应后图片的高度,

醉逍遥neo的博客 1万+

微信小程序自定义轮播图指示点

emmm先上效果图 微信小程序的swiper组件默认的指示点是小圆点,然后也不能修改它的大小和形状。 当然有时候我们希望更多样话,能够有更多的元素加载里面。 办法总比困难多,既然系统没有,那么我们就自己创一个指示点。 这就要用到swiper中的bindchange属性和current属性 所以,我们的中心思想就是获取当前轮播图滑块的index,然后传到js文件中,再创建一些受到js控制的视图容器,那我们就可以拥有更多样化的指示点了 //wxml //创建一个轮播图 <swiper curre

mycocoo的博客 3317

uni-app中动态改变swiper的current

uni-app中动态改变swiper的current <template> <view> <swiper @change="changeswiper" :current="currentswiper" class="swiper" circular indicator-dots="indicatorDots" > <swiper-item v-for="(item,index) in 9"> <view class="swiper-i

qq_29184685的博客 8618

四旋翼滑模控制:从理论到Simulink实现

本文深入探讨了四旋翼滑模控制的理论与Simulink实现,对比了其相较于PID控制在抗干扰和鲁棒性方面的显著优势。文章详细介绍了从精确动力学建模、内外环滑模控制器设计到指令解算的完整流程,并分享了Simulink仿真搭建、参数调试及抗扰性能验证的实战经验,帮助工程师掌握在复杂环境下提升四旋翼稳定性的进阶技能。

weixin_29163581的博客 375

Anthropic API接入指南:连接失败、403鉴权与Claude Code集成排查

在AI应用开发中,API接入与鉴权机制是开发者绕不开的基础工程问题。无论是调用云端模型服务还是自建网关,网络连通性、HTTP状态码语义、模型路由映射都会直接影响服务可用性。本文从通用的网络诊断与鉴权原理出发,梳理了从TCP连接失败到403权限拒绝的典型链路,并深入解析网关模型路由匹配机制。在此基础上,进一步说明如何通过环境变量完成Claude Code与VS Code的本地集成,以及一套基于Python的可复现接入方案。内容涵盖Anthropic API高频报错定位、curl冒烟测试、SDK工程化实践,适合

weixin_28743405的博客 468

小程序使用swiper时报错, [Component] <swiper>: current 属性无效,请修改 current 值或者页面卡顿,疯狂轮播

渲染层错误] [Component] : current 属性无效,请修改 current 值(env: Windows,mp,1.06.2307250;lib: 2.24.0)这个是页面使用轮播组件时,没有添加current属性,添加上就可以了,但是添加后,小程序在手机上锁屏(有时候要等几分钟)重新打开时,页面疯狂卡顿,轮播。

qq_45314999的博客 2915

SAP 财务BAPI_ACC_DOCUMENT_POST批导的税务tax

最近遇到了关于SAP财务凭证批导要bapi:BAPI_ACC_DOCUMENT_POST增加税的功能要求,查阅了一众文献发现都不尽如人意,所以想着自己写一个趟过的雷吧。 一般前台sap的凭证是有自动计算税码的勾选框的,但是bapi却并没有这个字段。 实际操作过程中1.可以定义一个税额的结构,参考bapiactx09 2.在会计分录上传如果需要增加税码的时候,譬如总账gl,需要对应tax_code 3.通过CALCULATE_TAX_FROM_GROSSAMOUNT 计算出税额和acct_k...

qq_35640448的博客 3187

bindchange 参数_微信小程序bindchange是什么事件?

展开全部bindChange 为输入框发生改变事件。微信提供的e68a84e8a2ad62616964757a686964616f31333431363033 bindchange 在支持方面还有小问题,目前是失去焦点才能触发到此事件的发生。如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况...

weixin_33001561的博客 1万+

蓝牙Mesh安全机制全解析:如何防止你的智能门锁被黑客控制?

本文深入解析蓝牙Mesh安全机制,重点探讨如何保护智能门锁免受黑客攻击。详细介绍了蓝牙Mesh的多层次安全架构,包括密钥管理体系、设备入网流程及实战防护策略,帮助用户构建更安全的智能家居网络。

h3i4j的博客 730

分享一些基于微信小程序开发的小游戏源码

小游戏小程序是运行在微信生态系统(或其他支持小程序的平台)中的轻量级应用程序,专为休闲游戏体验而设计的小程序子类别,小游戏小程序通常体积较小,加载速度快,用户无需等待长时间即可开始游戏。用户无需下载或安装单独的游戏应用程序,即可通过小程序入口直接进入游戏,同时小游戏小程序通常包含排行榜、分享功能等社交元素,可以增强游戏体验并促进用户参与。game.js:游戏页面的逻辑文件,包含页面数据、生命周期函数、事件处理函数等。game.wxml:游戏页面的结构文件,定义了页面的布局和组件。

xinshangdian的博客 6229

微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换

一、前言swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug。核心属性circular: 负责切换衔接的效果(否则最后一张与第一张的切换体验很差)current: 控制当前显示的页index索引autoplay:是否自动播放,此处我们选择false(或者默认不写)duration:切换页所需要花的时间,一般为1000即1秒bindc...

weixin_39774491的博客 2514

UG\NX二次开发 找不到指定的dlx文件(Specified Dlx file not found)

有群友问:用Ctrl+U运行的时候就报错,找不到指定的dlx文件Specified Dlx file not found。怎么处理。

王牌飞行员_里海的博客 1130

微信小程序页签切换-swiper滑块

微信页签切换效果 知识点:三元表达式、bindtap点击事件、data-current绑定下标、swiper、swipt-item 效果: 1. wxml <view class='content'> <!-- 标签导航 --> <view class='nav'> <!-- default是默认样式、select是选中样式 --> ...

qq_34227291的博客 1920

2024年11月架构设计师案例分析真题回顾,附参考答案、解析及所涉知识点(二)

软考高级系统架构设计师考试包含三个科目:信息系统综合知识、案例分析和系统架构设计论文。考试形式为机考。本文主要回顾2024年下半年(2024-11-10)系统架构设计师考试上午第二科案例分析的题目,同时附带参考解答、解析和所涉知识点。

一几文的编程学习笔记。 1661

【即插即用模块】Transformer篇 | ICCV 2025 | MALA :注意力分布神似Softmax,告别线性注意力性能短板!

MALA(Magnitude-Aware Linear Attention)是一种改进的线性注意力机制,通过引入缩放因子和偏移项,解决了传统线性注意力忽视查询幅度的问题,使其分布更接近Softmax Attention。该模块具有线性复杂度(O(n)),结合RoPE和LEPE编码实现全局-局部位置信息混合,通过z值调制平衡信息权重。实验表明MALA在轻量级视觉任务中能有效平衡效率与精度,注意力可视化显示其分布与Softmax Attention高度相似。代码提供完整的RoPE位置编码和线性注意力

主要更新底层视觉(去噪、超分等)相关的科研内容,形式为【论文精读】+【论文复现】 1107

微信小程序报current无效,请修改current值

bug复现方式:商品详情中有多个颜色,点击颜色实现切换swiper中的主图。swiper中未设置current值。当点击栗色滑动第五张在切换到第四章,点击黑色发现小程序中会报current无效,请修改current值,并且主图显示为空白。 解决方法: 在swiper中设置current为一个变量,默认初始值为0,在点击切换颜色中的切换主图方法中设置current为0即可解决。具体代码如下:...

lindali1115的博客 1万+

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

uniapp中swiper动态current值失效的深度解析与实战修复

本文深度解析uniapp中swiper组件动态current值失效的问题,提供官方解决方案与实战修复代码。通过@change事件监听与数据绑定同步,确保current值动态更新,解决滑块位置控制失效的常见问题,并给出性能优化与扩展应用建议。

star5的专栏 159

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

小程序 swiper组件的current失效问题

问题背景: 想在页面内实现点击标签切换swiper,同时也可以手动滑动swiper切换页面效果。 WXML代码如下: js代码如下: 讲道理是没啥问题的,然而在调试过程中发现: 每当current从1变成0时就会丢失current,导致效果异常 查了一些资料发现,很多兄弟都出现过类似的问题,应该属于swiper的bug,难道说current从1到0时组件认为没有发生change...

qq_18342353的博客 3213

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

微信小程序swiper组件踩坑实录:图片变形、滑动卡顿、指示器不显示,一次解决

本文深入解析微信小程序swiper组件的常见问题与优化方案,包括图片变形、滑动卡顿和指示器不显示等。通过实战案例和代码示例,提供从图片自适应到性能优化的全链路解决方案,帮助开发者高效实现流畅的轮播图效果。

weixin_30875157的博客 457

微信小程序里swiper 中bindchange事件中设置setdata赋值出现问题

最近在开发微信小程序的时候碰到一个问题就是bindchange事件发生了赋值问题 看到官方文档是这样写的 change事件 source 返回值 从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致swiper变化; touch 用户划动引起swiper变化; 其它原因将用空字符串表示。 Bug & Tip tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致

weixin_44363139的博客 2775

案例 4.4 微信小程序 swiper 和 switch 组件(swiper 共 4 个滑动项)

本次案例《4.4 swiper 和 switch 组件》,学习小程序轮播swiper轮播组件与开关switch组件。在基础功能上,给 swiper 新增一项,一共 4 个滑动页面,实现轮播切换,使用 switch 控制轮播自动播放。swiper:轮播容器,代表每一个滑动项,常用于首页 banner。autoplay:是否自动轮播interval:自动切换间隔时间bindchange:轮播切换触发事件switch:开关组件,bindchange监听开关状态,布尔值 true 打开,false 关闭。

Lam_8的博客 197

绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)...

微信小程序开发文档-组件-swiper后面追加的新闻如上图所示; 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象。 1 bindchangeSwiper(event) { 2 console.log(event.detail); 3 this.setData({ 4 curren...

weixin_30641999的博客 984

小程序Swiper组件做日历(周历)左右滑动动态修改数据

使用Swiper做一个周日历功能,要求滑动swiper时,可以显示上一周/下一周的日期。 一开始设想的是使用二维数组存放3个周的日期,右滑时push接下来的周,然后shift第一项,左滑反之,试了几种方法,要么是日期不见了,要么就是判断左滑右滑失败了。 看到这篇文章《小程序 - swiper滑动日历》,受到了启发,于是继续尝试,这次总算是成功了。 思路 使用数组存放3个周的日期,weeks = ...

immocha的博客 3023

uniapp 微信小程序swiper组件实现一个逆向无限轮播

我第二个思路是定时修改current-1进行逆向,duration/display-multiple-items,实践发现轮播还未结束就触发了下一个轮播,结果首尾没有连接上,造成轮播从第一个跳转到最后一个会正向轮播。我们查到有@animationfinish="endAnimation"属性,可以检测轮播结束时间,这样子就实现了轮播逆转了。结果发现手动轮播方向也进行了翻转;手动更改样式逻辑太过复杂;用样式style="transform: scaleX(-1);我第一个思路是把整体样式进行翻转。

ylj520520的博客 1037

微信小程序swiper来回切换闪烁

问题:swiper组件自动播放时,左右来回切换闪烁 原因: 解决方案: 不要对current重新赋值,改写一下用cur swiperChange (e) { this.setData({ cur: e.detail.current }) }, ...

少吃点肉的博客 2489
上一篇: 微信小程序常用到的
下一篇: PHP 保留两位小数的几种方法/循环当天开始的未来7天所有日期
xyl_hq
博客等级 码龄8年 14粉丝 36原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值