2020年10月20日

微信小程序原生组件——switch滑块


微信小程序原生组件——switch滑块,在网页切图中类似switch滑块效果需要依赖第三方jquery插件来实现,而在小程序切图的时候,这一切变得简单,代码如下:

<view class=”section section_gap”>
<view class=”section__title”>type=”switch”</view>
<view class=”body-view”>
 <switch checked=”{{switch1Checked}}” bindchange=”switch1Change”/>
</view>
</view>

<view class=”section section_gap”>
<view class=”section__title”>type=”checkbox”</view>
<view class=”body-view”>
<switch type=”checkbox” checked=”{{switch2Checked}}” bindchange=”switch2Change”/>
</view>
</view>

var pageData = {
data: {
switch1Checked: true,
switch2Checked: false,
switch1Style: ”,
switch2Style: ‘text-decoration: line-through’
}
}
for(var i = 1; i <= 2; ++i) {
(function(index) {
pageData[`switch${index}Change`] = function(e) {
console.log(`switch${index}发生change事件,携带值为`, e.detail.value)
var obj = {}
obj[`switch${index}Checked`] = e.detail.value
this.setData(obj)
obj = {}
obj[`switch${index}Style`] = e.detail.value ? ” : ‘text-decoration: line-through’
this.setData(obj)
}
})(i)
}
Page(pageData)

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732

标签:,