千家信息网

微信小程序switch开关选择器如何用

发表于:2025-01-21 作者:千家信息网编辑
千家信息网最后更新 2025年01月21日,本文小编为大家详细介绍"微信小程序switch开关选择器如何用",内容详细,步骤清晰,细节处理妥当,希望这篇"微信小程序switch开关选择器如何用"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入
千家信息网最后更新 2025年01月21日微信小程序switch开关选择器如何用

本文小编为大家详细介绍"微信小程序switch开关选择器如何用",内容详细,步骤清晰,细节处理妥当,希望这篇"微信小程序switch开关选择器如何用"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

效果图

WXML

   状态:{{isChecked1}}      状态:{{isChecked2}}      状态:{{isChecked3}}      状态:{{isChecked4}}      状态:{{isChecked5}}      状态:{{isChecked6}}   

JS

var pageObj = { data: {  isChecked1: false,  isChecked2: true,  isChecked3: false,  isChecked4: true,  isChecked5: false,  isChecked6: true }};for (var i = 0; i < 7; ++i) { (function (i) {  pageObj['changeSwitch' + i] = function (e) {   var changedData = {};   changedData['isChecked' + i] = !this.data['isChecked' + i];   this.setData(changedData);  } })(i)}Page(pageObj);

switch组件的属性

  • checked:是否选中--false、true

  • type:开关选择器的样式--switch, checkbox

  • color:switch 的颜色,同 css 的 color

读到这里,这篇"微信小程序switch开关选择器如何用"文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注行业资讯频道。

0