微信小程序swiper bindChange重复执行
swiper是微信小程序的一个滑动组件,非常重要。如果只是做简单的轮播图而不进行复杂的逻辑,直接可以使用,甚至不需要知道组件的方法。
今天在做一个如下的页面时,快速滑动swiper出现了问题:

控制台打印,发现bindChange绑定的方法重复执行了,我们再看官方文档的解释:
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

而我们的bindChange确实使用了setData(),来保证swiper组件的current属性与我们的this.data.index同步。为什么要有this.data.index这个变量?是因为我们要获得当前的页数进行其他的操作。比如上图底部的slider就用到这个变量。但是这个变量必须在bindChange进行同步。
至此,我们的程序在快速滑动的时候是有问题的。不断触发setData()。此外,在官方的开发社区找到这么一条:

后来一想,在bindChange改变swiper的current是有问题的,那么,改变另外的变量呢?答案是没有问题的。
那么,我们的做法是,data里定义2个变量:
data{
cur:0,//改变当前索引
index: 0//当前的索引
}
当前的页数用index来标记。swiper组件的current属性我们用变量cur。互不干扰。当页面变化时,我们设置index,当我们需要改变页面时,我们设置cur.index和cur是不同步的。
<swiper
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
bindchange="swiperChange"
current="{{cur}}">
swiperChange(e){
let current = e.detail.current;
let source = e.detail.source
//console.log(source);
console.log(current,this.data.index,this.data.cur)
this.setData({
index:current
})
这个问题的出路就是,不要想着用一个变量作为swiper的current和当前页码的标记。一旦分开这2个变量,问题就解决了。
微信小程序swiper bindChange重复执行的更多相关文章
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
- 微信小程序onLaunch、onLoad执行生命周期
原文转载自:微信小程序onLaunch.onLoad执行生命周期 1.需求:先执行App的onLaunch添加验证权限等,再执行Page里的onLoad. 2.问题:还没有等onLaunch执行完成, ...
- 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)
微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...
- 微信小程序swiper制作内容高度不定的tab选项卡
微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 微信小程序swiper高度自适应,swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 微信小程序wx.login先执行onLaunch与onLoad加载顺序问题
@ 目录 遇到问题 请求api返回需要先登录,实际上登录已成功 问题分析 解决问题 自定义回调函数 app.js index.js 扩展提问 学习交流 随机数字随机幸运数+ My Blog 技术交流 ...
- 基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...
随机推荐
- [luogu1373]小a和uim之大逃离_动态规划
小a和uim之大逃离 题目大意:有一个n*m的矩阵.每个格子上有一坨0~k不等量的权值.有两个人,每个人任选一个格子作为出发点,并只能向下或向右走.求最后两个人所得到的权值mod k相等的方案数. 注 ...
- 关于Spring的xml文档的简单实用配置
Spring的spring.xml文档的配置 最近在写Spring的配置文件时,发现Spring文档的配置其实没必要那么繁琐记忆,网上的很多文章都写得很繁琐,如果所有的东西按照路径去查找,可以很快的帮 ...
- N天学习一个linux命令之rpm
用途 RPM是Redhat Package Manager三个单词首字母缩写,是类redhat linux系统的包管理器,用它可以安装包(二进制/源码),升级包,删除包,查询包信息等功能.RPM软件包 ...
- hdu 3810 Magina 队列模拟0-1背包
题意: 出一些独立的陆地,每片陆地上有非常多怪物.杀掉每一个怪物都须要一定的时间,并能获得一定的金钱.给出指定的金钱m, 求最少要多少时间能够得到m金钱,仅能选择一个陆地进行杀怪. 题解: 这题,假设 ...
- cocos2dx编译安卓版本号查看C++错误
首先,在Mac以下相关软件路径,打开"终端",然后输入 pico .bash_profile 回车 export COCOS2DX_ROOT=/Users/bpmacmini0 ...
- OpenCV:Visual Studio 2013 Ultimate中OpenCV 2.4.8 配置
配置环境: 操作系统:Win8.1 64位 IDE平台:Visual Studio 2013 Ultimate 一.准备OpenCV 2.4.8 1.下载:从官网下载 OpenCV2.4.8: ...
- springboot-quartz 实现动态添加,修改,删除,暂停,恢复等功能
任务相关信息:springboot-quartz普通任务与可传参任务 一.任务实体类 package cloud.app.prod.home.quartz; import java.io.Serial ...
- mongoDB学习笔记——在C#中查询
1.下载安装 想要在C#中使用MongoDB,首先得要有个MongoDB支持的C#版的驱动.C#版的驱动貌似有很多种,如官方提供的samus. 实现思路大都类似.这里我们用官方提供的mongo-csh ...
- IE6、IE7的兼容问题
通常,网页的兼容问题,就是IE6\IE7的问题.表现为错位.换行,不支持CSS3等. 而其中,错位.换行,原因往往在于没有指明元素的width.height. 一般银瓦不告诉他.
- hdu4738Caocao's Bridges
什么?有人要炸我的桥?!D飞他(心疼周瑜大都督) 这个就是求割边/桥了. #include<cstdio> #include<iostream> #include<cst ...