精华内容
下载资源
问答
  • 控制台打印,发现bindChange绑定的方法重复执行了,我们再看官方文档的解释: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html   (此图片来源于网络,如有侵权,请联系删除! ) 而我们的...
  • bindchange绑定了选中取消的函数,在函数里向控制台打印了输出进行测试,但是控制台没有出现打印的语句,其他地方的打印正常。 <p>--》这是wxml中的bindchange <p style="text-align:center">...
  • Step3:hidden接到false的时候触发bindchange事件并执行coastchange函数(coastchange执行前会有一个延时(duration),默认1500毫秒),函数中将toastHidden的值设置为true,此时toast组件再次隐藏。

    微信小程序toast组件是一种消息提示框。例如当文章条数全部加载出来后,用户再次点击加载更多的时候,js判断文章条数全部加载出来后,便让toast组件弹出提示用户“没有更多文章了”,效果如下图所示:

    bdf5c6a220c76ab5485a537013f6681c.gif

    代码实现

    index.wxml

    1 //点击加载更多,执行js里的loadMore函数

    2 加载更多

    3

    4 //hidden接收js传递过来的toastHidden变量值,为true,toast隐藏;为false,toast显示

    5 没有更多文章了

    文件路径:pages/index/index.wxml

    index.js

    1 Page({

    2 data: {

    3 //定义toastHidden变量,并将初始值设为true,此时toast组件隐藏

    4    toastHidden: true,

    5   },

    6

    7 //点击加载更多时执行的函数

    8   loadMore: function () {

    9 var that = this

    10 if (“数据条数全部加载出来后”) {

    11 //if条件成立的话,将toastHidden的值设为false,此时toast组件显示

    12      that.setData({ toastHidden: false })

    13     }

    14   },

    15

    16 //这个函数将toastHidden值再次设为true,此时toast组件再次隐藏

    17   toastChange: function () {

    18 this.setData({ toastHidden: true })

    19   }

    20 })

    文件路径:pages/index/index.js

    toastchange函数在哪里被执行了?

    在上面的动态效果图中,可以看到,当文章条数全部加载出来后,toast组件弹出提示,且几秒后又消失。js中toastchange函数就是让toast组件再次消失。但是代码中并没看到toastchange函数在哪被调用。这就得先了解下toast组件的文档说明。

    2ba675006ada730590d85f50baccdc93.png

    从文档中得知bindchange事件触发条件需要hidden的值为false。toastchange函数绑定在bindchange事件上,因此toastchange函数在hidden的值为false的时候执行。这里回看js中hidden的值设为false的地方。

    23c1ad2e2c03e7af4b07c16f5d4e4af1.png

    代码分析

    Step1:toast组件接收js传递过来的toastHidden初始值(true),此时toast隐藏。

    Step2:js程序判断文章条数全部加载出来后,将toastHidden值设为false,此时toast显示。

    Step3:hidden接到false的时候触发bindchange事件并执行coastchange函数(coastchange执行前会有一个延时(duration),默认1500毫秒),函数中将toastHidden的值设置为true,此时toast组件再次隐藏。

    展开全文
  • 微信小程序bindchange是什么事件?

    千次阅读 2020-12-31 08:55:49
    展开全部bindChange 为输入框发生改变事件。微信提供的e68a84e8a2ad62616964757a686964616f31333431363033 bindchange 在支持方面还有小问题,目前是失去焦点才能触发到此事件的发生。如果在 bindchange 的事件回调...

    展开全部

    bindChange 为输入框发生改变事件。微信提供的e68a84e8a2ad62616964757a686964616f31333431363033 bindchange 在支持方面还有小问题,目前是失去焦点才能触发到此事件的发生。

    如果在  bindchange 的事件回调函数中使用  setData 改变  current 值,则有可能导致  setData 被不停地调用,因而通常情况下请在改变  current 值前检测  source 字段来判断是否是由于用户触摸引起。

    swiper里加了bindchange事件,有很多个swiper-item,连续快速切换swiper-item触发bindchange事件,小程序会出现一直无限触发bindchange事件。请检查是否在change事件中使用setData改变current值,请避免该操作。

    扩展资料

    bindchange 是 swiper 组件的属性之一,类型为 eventhandle 。

    current 改变时会触发 change 事件,event.detail = {current, source}。当滑块的current改变时会触发该事件并执行绑定的方法。

    swiper组件是小程序中使用频次最高的组件之一,属于视图容器类组件,它通过对自身属性进行简单配置就可以实现在前端开发中要写很多代码才能完成的轮播图效果。

    展开全文
  • 不过 checkbox-group 组件的 bindchange 改成 catchchange 并不会阻止事件的冒泡 解决方法就是在checkbox-group父级的 view 加一个 catchtap=“catchtap” 的点击事件, catchtap 这个方法只要是一个空的函数即可,...

    bind 事件绑定不会阻止冒泡事件向上冒泡
    catch 事件绑定可以阻止冒泡事件向上冒泡
    不过 checkbox-group 组件的 bindchange 改成 catchchange 并不会阻止事件的冒泡
    解决方法就是在checkbox-group父级的 view 加一个 catchtap=“catchtap” 的点击事件, catchtap 这个方法只要是一个空的函数即可,冒泡到view的时候,在这里就会结束冒泡。

    代码如下:

    <view catchtap="catchTap">
          <checkbox-group bindchange="checkboxChange"/>
     </view>
    
    catchTap() {},
    checkboxChange: function (e) {...}
    
    展开全文
  • 最近在开发微信小程序的时候碰到一个问题就是bindchange事件发生了赋值问题 看到官方文档是这样写的 change事件 source 返回值 从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下: ...

    最近在开发微信小程序的时候碰到一个问题就是bindchange事件发生了赋值问题
    看到官方文档是这样写的

    change事件 source 返回值 从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下:

    autoplay 自动播放导致swiper变化; touch 用户划动引起swiper变化; 其它原因将用空字符串表示。 Bug & Tip
    tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData
    被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

    这里的source是事件自带的一个属性

    <swiper bindchange="bindchange" class="banner banner-style1" indicator-dots="{{false}}" autoplay="{{false}}" vertical="{{false}}" current="{{current}}" circular="{{true}}" interval="3000" duration="500" display-multiple-items="1">
    

    由于产品需求我的swiper小圆点样式是自己写的

    <view class='current-item' wx:if="{{gallery.length > 0}}">
    		<block wx:for="{{gallery}}" wx:key="index">
    		<--- 由于产品需求我的小圆点是自定义的所以我自己写的样式 让小圆点的index 等于当前选中的索引值--->
    			<view class="{{index == indexCurrent?'active':'in-item'}}"></view>
    		</block>
    	</view>
    

    重点来啦
    在data里设置两个变量

    data:{
    	indexCurrent: 0,//当前的索引
        current: 0, //改变当前的索引值
    }
    
      bindchange: function (e) {
        console.log("轮播change事件====="+JSON.stringify(e));
        let that = this
        let current = e.detail.current;
        let source = e.detail.source;
         // 这里的source是判断是否是手指触摸 触发的事件
         if(source === 'touch'){
          that.setData({
            indexCurrent: current
          })
          console.log("选中的current值====="+that.data.indexCurrent)
         }
    

    如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。
    重点来啦
    用两个变量来记录swiper的current 和当前索引值

    有什么意见或建议欢迎指正噢~~~

    展开全文
  • 小程序中的事件bindtap,bindchange

    千次阅读 2019-04-09 14:26:54
    bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="2" > Page({ data: { x: 0, y: 0 }, tap(e) { this.setData({ x: 30, y: 30 }) }, onChange(e)...
  • 微信小程序bindchange解决冒泡问题

    千次阅读 2019-10-24 15:32:11
    小编在做一个微信小程序的多选框的时候用到了bindchange这个函数来实现多选的实现,但是小编需要解决冒泡问题,这时候发现catchchange这个方法居然解决不了问题,无法阻止冒泡,经过一系列的尝试最终发现了解决的...
  • 解决微信小程序的picker-view bindChange 延迟问题及解决思路 具体需求:如下图, 上下滑动选择身高,选择完成之后点击完成,要求获取到所选择的身高值 类似上面的需求,比如选择出生年月、年龄之类都会碰到,...
  • 背景说明 由于公司需求需要,需要按照返回值设置当前swiper 的curren值,造成swiper的闪烁、抖动问题,现在...bindchange eventhandle 否 current 改变时会触发 change 事件,event.detail = {current, source} ...
  • ,但官方文档中对这个组件的两个事件bindchange和bindcolumnchange事件解释得比较简略。自己总结了一下这两个事件的区别。 触发时机的不同   在多列选择器中,bindchange只在点击“确定”按钮之后触发,而...
  • 这是官方文档的说法给出了swiper组件一直来回滑动的bug原因 以下是修正方法 <swiper autoplay="{{autoplay}}" ...bindchange="swiperChange" current="{{current}}"> swiperCh...
  • 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象。 我在这次出现的问题:在手机小程序上点击tab栏切换,出现频频闪动 bindchangeSwiper(event) { console.log(event.detail)...
  • mpvue中使用vant的slider组件 发现绑定的change函数无效
  • 微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值。 只有bindblur事件,需要在textarea中输入内容后,鼠标点击页面其他区域才会触发。 如果页面上只有一个textarea和一个提交按钮,我输入完...
  • <swiper class="bannerswipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange"> <block wx:for="{{imgs}}"> <swiper-item> <image src="{{item.url}}"></image> ...
  • 最近在使用swiper的时候,下拉刷新后导致swiper item不断的跳动卡住。 一开始以为是下拉刷新导致的,后面在开发社区看到相关的问题,是由于swiper导致的。...在手动滑动swiper时打出以下消息: ...
  • 微信小程序开发文档-组件-...如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象。 1 bindchangeSwiper(event) { 2 console.log(event.detail); 3 this.setData({ 4 curren...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,038
精华内容 2,415
关键字:

bindchange