微信小程序bindchange是什么事件？

bindChange为输入框发生改变事件。微信提供的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组件是小程序中使用频次最高的组件之一，属于视图容器类组件，它通过对自身属性进行简单配置就可以实现在前端开发中要写很多代码才能完成的轮播图效果。

参考资料：微信官方文档-swiper

在小程序内存在列表等形式的页面内增加下拉刷新功能，提高用户体验感，加强界面 *** 作与交互性；

<a name="gXpSi"></a>

1、小程序提供的下拉刷新（无法自定义刷新动画）

可能遇到的问题：

1）下拉时没有出现刷新的点点动画

可能是因为设置的页面背景色与点点动画一致导致无法看到动画，可以在页面配置中配置背景文字颜色：

2、scroll-view内refresher-enabled属性开启自定义刷新

基本库要求：2.10.1

官方文档： scroll-view

3、原始scroll-view自定义下拉实现（为兼容2.10.1一下的下拉刷新

通过监听手指移动距离控制需要下拉模块的下拉距离，主要事件bindtouchstart，bindtouchmove和bindtouchend，bindtouchmove记录手指开始下拉时的起始位置，bindtouchmove计算下拉距离，bindtouchend判断并实现刷新方法。

我的自定义下拉组件（Taro框架）

<a name="fEutw"></a>

1、与ios上橡皮筋效果冲突导致下拉无法触发自定义刷新

页面配置 disabledScroll ，禁止页面滚动，同时页面内的列表滚动需要自己再优化调整；

2、scroll-view的scroll问题

需要设定固定高度然后纵向滚动。[我都忘了是啥问题了……

3、页面下拉刷新结束后再滑动列表出现闪屏

在禁止页面橡皮筋效果后，如果页面内存在需滚动区域使用scroll-view效果比view更加流畅；

不设定固定高度不会发生闪屏但是页面滚动非常不流畅；

4、使用官方提供的scroll-view自定义的动画时，当scroll-view内容不足充满一屏时下拉出现问题

将scroll-view设置固定高度后，将其子元素的高度设置多一像素达到隐形撑满的效果。

5、scroll-view内fixed元素问题

ios内scroll-view内fixed元素层级会出现问题，可能出现被遮挡的问题。

6、当页面内局部需要下拉刷新时可能导致内外两个滚动条问题

一个是页面滚动条一个是scroll-view滚动条，由于 *** 作的时候触发的是scroll-view部分的滚动导致页面滚动无法进行从而影响页面其他 *** 作。

Q5和Q6可以合并成一个问题，当页面需要一个吸顶 *** 作时，即滑动距离超过阈值时导航条吸顶的功能，若scroll-view将整个页面包含就会出现Q5的问题，可能导致在ios内吸顶的导航栏无法显示，若scroll-view只包含需要刷新的部分则会出现Q6的两个滚动条的问题。

1）在页面未触发吸顶时禁止scroll-view模块下拉，触发后放开滚动，同时会导致无法下拉。

2）页面滚动触发，scroll-view模块可下拉，但是滚动区域无法滚动，且下拉动画只显示一次。

实现效果如下：

实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：

scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素；

bindscroll：滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

结构图示：

wxml:

js:

数据结构：

如果你还想实现从其他页面，点击按钮跳转到当前页面，并且列表滚动到指定项，此项在可视区域的第一个展示：

wxss:

---