有关微信小程序_微信小程序完成多选框功用的实

发布时间:2021-01-05 13:21 作者:jianzhan

摘要: 手机微信微信小程序完成选取框作用的案例编码 本文关键详细介绍了手机微信微信小程序完成选取框作用及实际效果,文中根据案例编码给大伙儿详细介绍的十分详尽,对大伙儿

微信小程序实现多选框功能的实例代码       这篇文章主要介绍了微信小程序实现多选框功能及效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

我们先来看看效果: 两种状态: 选中/不选中

wxml

 !-- 选择 S -- 
 view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" checked="{{item.selected}}" class="btn {{item.selected 'btn-selected' : ''}}" 
 {{item.title}}
 /view 
 !-- 选择 E -- 

核心js

Page({
 * 页面的初始数据
 data: {
 riderCommentList: [{
 value: '商品品质',
 selected: false,
 title: '商品品质'
 }, {
 value: '眉笔质地',
 selected: false,
 title: '眉笔质地'
 }, {
 value: '最新',
 selected: false,
 title: '最新'
 }, {
 value: '正品',
 selected: false,
 title: '正品'
 }, {
 value: '包装完整',
 selected: false,
 title: '包装完整'
 }, {
 value: '是否防水',
 selected: false,
 title: '是否防水'
 }, {
 value: '其他',
 selected: false,
 title: '其他'
 checkboxChange(e) {
 console.log('checkboxChange e:', e);
 let string = "riderCommentList[" + e.target.dataset.index + "].selected"
 this.setData({
 [string]: !this.data.riderCommentList[e.target.dataset.index].selected
 let detailValue = this.data.riderCommentList.filter(it = it.selected).map(it = it.value)
 console.log('所有选中的值为:', detailValue)
 * 生命周期函数--监听页面加载
 onLoad: function (options) {
 * 生命周期函数--监听页面初次渲染完成
 onReady: function () {
 * 生命周期函数--监听页面显示
 onShow: function () {
 * 生命周期函数--监听页面隐藏
 onHide: function () {
 * 生命周期函数--监听页面卸载
 onUnload: function () {
 * 页面相关事件处理函数--监听用户下拉动作
 onPullDownRefresh: function () {
 * 页面上拉触底事件的处理函数
 onReachBottom: function () {
 * 用户点击右上角分享
 onShareAppMessage: function () {
})

wxss 

.btn{
 font-size: 24rpx;
 padding: 12rpx 19rpx;
 border: 1px solid #dcdcdc;
 background: #F8F8F8;
 border-radius: 10rpx;
 margin-right: 30rpx;
 margin-bottom: 22rpx;
 text-align: center;
 display: inline-block;
 color: #666666;
.btn:nth-child(5) {
 margin-right: 0;
.btn-selected{
 border: 1px solid #FF7C80;
 color: #F73C41;
 background: #FFFFFF;
}

总结

到此这篇关于微信小程序实现多选框功能的实例代码的文章就介绍到这了,更多相关微信小程序 多选框功能内容请搜索凡科以前的文章或继续浏览下面的

  • 收藏!你该知道的论自助

    坚信,中小型型企业的老板在公司企业网站建设这一方面会很担忧,终归涉及到到到大多数数数花销,如公司企业网站建设花销,管理方法方式花销,运行维护保养维护保养花销等,并

  • 自助BI数据分析平台redas

    BI这些方面选择具体上挺多,比如Tableau,PowerBI,Superset,Metabase以及今天详尽详细介绍的redash。Tableau比较贵,运用起来都是拖拽式,对于一总数据分析工作中工作人员,写SQL是很多的,

  • 定制型网站建设需要多少

    订制型企业网站建设必须是多少钱?定制型网站务必多少钱钱?企业在建设网站时,理应选择模板基建项目网站,还是定制企业网站呢?基建项目网站务必多少钱钱呢?下面网编让你表述公

  • 自助建站系统哪个好用?

    最开始看网站布局,其次看见你务必什么功效以及它的特点,再聊是看未来销售市场市场前景这种~自己网站有wordpress(倘若你感觉它算自助式式的话)。它是认同地好。作出口出口外贸

  • 国内超市无人自助收银系

    前几日在逛深圳南山每个人乐的情况下,发觉她们搞了一个终端设备机,可是感受非常不太好。必须手动式键入产品名字——检索——挑选——添加买东西车,对每件产品必须开展循环