微信小程序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

微信小程序Swiper做Tab切换，带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换，但是有Swiper组件，其实我们也可以做滑动切换

监听Swiper的bindchange，我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的，体验不是很好。于是就有了这个demo，我们一步步优化切换体验。

首先：利用flex布局，做出tab区域，如果tab选项卡很多可以使用Scroll-view；一般的跳转式的tab用boder-bottom实现就好，这里我们加了一个“navbar-slider”，加上translateX动画实现平移切换。

然后：计算出每个tabItem的宽度，和每个item距离0坐标的距离；下中50是slider的宽度，对应上面“width:50px”

关联：1、监听item点击，切换swiper；2、监听swiper切换改变slider位置和tab显示

效果展示如下：

现在我们已经实现了，Swiper和tab的带动画联动，但是我们可以发现，我们的切换动画是在切换之后郑旦贺进行的，我们这里还可以继续优化。

swiper在切换时可以监听bindtransition，swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，dx则是平移的偏移量，我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置，这喊派里我们不能使用bindchange来校正，因为bindchange在切换时手指释放的时候就调用了，我们这里使用bindanimationfinish回调来校正（动画结束时会触发 animationfinish 事件，event.detail 同上）

最终：展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData，我们最后这种方式就会频繁的调用，所以这里其实只是提供这种思路，但是工程中并不迟告建议这么使用

小程序开发者文档

SwiperTab

接下来我们进入小程序开发正题

## 小程序实现的功能

目前小程序已经实现的功能有：

- 选择科目在线答题，答题可以选择单题模式还是列表模式

- 答题结束实时展示分数

- 查看分数结束可以查看正确答案

- 答题历史纪录查询，可以查阅当时做题情况

也就是说作为一个在线答题系统，基本功能都已闭环。

## 小程序采用框架

未采用第三方框架，使用小程序原生框架，未引入任何UI组件库

## 开发小程序过程中遇到的问题

先谈第一个问题，radio传值的问消轿闹题

在单选选择题的时候，用到以下两个表单组件

radio-group

radio-group | 微信开放文档

radio

radio | 微信开放文档

默认的radio组件事件

wxml文件

<radio-group class="radio-group" bindchange="radioChange"><radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}"><text>{{item.value}}</text></radio></radio-group>

js文件

Page({ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value: '中国', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'FRA', value: '法国' }, ] }, radioChange: function (e) { console.log('radio发生change事件，携带value值为：', e.detail.value) } })

没错，用的就是官方示例代码，我们看到在选择的时候，默认e.detail.value，只能取一个字符串，当时遇到的第一个问题就在帆洞这里，如果把这整个选项的信息提取出来，能简单的用{{JSON.stringfy(item)}}吗，当然不可以，因为原生小程序本身不支持。

当时在社区查到解决方案具体可以参考

[单选框radio除了可以传value可以传其他的值吗？]

单选框radio除了可以传value可以传其他的值吗？ | 微信开放社区

方案就是引入wxs，之前看官方文档，每次到这里，因为不知道这是干什么的，以及解决什么问题，现在明白了，想了解更多关于wxs的内容拿罩，也请移步下面两篇文档

[微信小程序wxs有什么用？]

微信小程序WXS 有什么用？ | 微信开放社区

[小程序里面精度计算问题]

小程序里面数据精度计算问题 | 微信开放社区

## 小程序截图

## 代码适用人群

本代码建议小程序初学者或者大学做毕业设计的同学参考。

## 代码路径

小肥羊/从业资格考试助手

## 扫码体验

微信小程序搜索 从业资格题库或者直接扫码

---