iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序多项选择器checkbox
  • 596
分享到

微信小程序多项选择器checkbox

2024-04-02 19:04:59 596人浏览 薄情痞子
摘要

本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下 第一的话就是我们的相关的布局文件: <view class="container

本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下

第一的话就是我们的相关的布局文件:

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <view class="page-section-title">默认样式</view>
      <label class="checkbox">
        <checkbox value="cb" checked="true"/>选中
      </label>
      <label class="checkbox">
        <checkbox value="cb" />未选中
      </label>
    </view>
  
    <view class="page-section">
      <view class="page-section-title">推荐展示样式</view>
      <view class="weui-cells weui-cells_after-title">
        <checkbox-group bindchange="checkboxChange">
          <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
            <view class="weui-cell__hd">
              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view class="weui-cell__bd">{{item.name}}</view>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
  
</view>

然后的话就是我们的小程序的逻辑部分:

Page({

  // 在我们的这个位置的话填充我们的相关的数据
  onShareAppMessage(){
    // 在我们的这个位置的话就是闯进我们的相关的方法
    return{
      title: 'checkbox',
      path: 'pages/checkbox/checkbox'
    }
  },
// 然后的话就是填充我们的相关的数据:
data:{
   // 然后的话在我们的这个位置的话就是设置我们的相关的方法
  items:[
    {value:'usa', name:'影响力'},
    { value: 'usa', name: '影响力' },
    { value: 'usa', name: '韭菜的自我修养' },
    { value: 'usa', name: '你的名字' },
    { value: 'usa', name: '怪诞行为学' ,checked: 'true'},
    { value: 'usa', name: '教父' },
    { value: 'usa', name: '经济学原理' },
    { value: 'usa', name: '三国演义' },
    { value: 'usa', name: '绝对成交' },
    { value: 'usa', name: '行为经济学讲义' },
    { value: 'usa', name: '黑天鹅' },
    { value: 'usa', name: '灰犀牛' },
  ]
},
// 在我们的额这个位置的话就是设置我们的相关的方法

  // 在我们的这个位置的话就是创建一个有参数的构造方法
  checkboxChange(e){
    // 在我们的这位置的话就是在我们的控制台中输出我们需要的东西
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
    const items = this.data.items
    const values = e.detail.value
    // 然后的话在我们的这个位置使用我们的for循环来设置创建我们的相关的东西
    for (let i = 0, lenI = items.length; i < lenI; ++ i){
      // 然后的话就是循环遍历到后就获取到我们的东西
      items[i].checked = false
      for (let j = 0, lenJ = values.length; j < lenJ; ++j){
        if (items[i].value === values[j]){
          items[i].checked = true
          break
        }
      }
    }
    // 然后的话在我们的下面的这个位置的话就是设置我们的相关的方法
    this.setData({
      items
    }) 
    
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序多项选择器checkbox

本文链接: https://www.lsjlt.com/news/154052.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序多项选择器checkbox
    本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下 第一的话就是我们的相关的布局文件: <view class="container...
    99+
    2024-04-02
  • 微信小程序多项选择器checkbox怎么使用
    这篇文章主要介绍“微信小程序多项选择器checkbox怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序多项选择器checkbox怎么使用”文章能帮助大家解决问题。第一的话就是我们的相...
    99+
    2023-07-02
  • 微信小程序如何使用checkbox显示多项选择框功能
    这篇文章主要介绍微信小程序如何使用checkbox显示多项选择框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:1、效果展示2、关键代码① index.wxml<c...
    99+
    2024-04-02
  • 微信小程序实现多列选择器
    本文实例为大家分享了微信小程序实现多列选择器的具体代码,供大家参考,具体内容如下 <picker class="picks" mode="multiSelector" bind...
    99+
    2024-04-02
  • 微信小程序picker多列选择器(mode = multiSelector)
    目录一、效果图(多列)二、普通选择器:mode = selector、多列选择器:mode = multiSelector三、app.json四、picker.wxml五、picke...
    99+
    2024-04-02
  • 微信小程序checkbox如何变小
    这篇“微信小程序checkbox如何变小”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序checkbox如何变小”文...
    99+
    2023-06-26
  • 微信小程序picker多列选择器怎么用
    本篇内容主要讲解“微信小程序picker多列选择器怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序picker多列选择器怎么用”吧!vue-next-admin,这是基于 vue3...
    99+
    2023-06-08
  • 微信小程序选择器怎么用
    这篇文章主要介绍“微信小程序选择器怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序选择器怎么用”文章能帮助大家解决问题。页面结构<!--pages/warn/index.wxml...
    99+
    2023-06-26
  • 微信小程序实现课程选择器
    本文实例为大家分享了微信小程序实现课程选择器的具体代码,供大家参考,具体内容如下 话不多说,直接上效果图 代码如下 wxml <view class="urg_input"&...
    99+
    2024-04-02
  • 微信小程序自定义多列选择器使用
    本文实例为大家分享了微信小程序自定义多列选择器的具体代码,供大家参考,具体内容如下 项目需要,需要实现一个多列选择器,在用户确定之前,无论列表如何转,都不会影响已确定值的显示,只要用...
    99+
    2024-04-02
  • 微信小程序如何自定义多列选择器
    今天小编给大家分享一下微信小程序如何自定义多列选择器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。项目需要,需要实现一个多列...
    99+
    2023-07-02
  • 微信小程序实现时间选择
    本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下  xml:  <view class="day-check" style=...
    99+
    2024-04-02
  • 微信小程序picker选择器怎么实现
    本篇内容主要讲解“微信小程序picker选择器怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序picker选择器怎么实现”吧!picker选择器分为三种,普通选择器,时间选择器,...
    99+
    2023-06-26
  • 微信小程序自定义滚动选择器
    本文实例为大家分享了微信小程序自定义滚动选择器的具体代码,供大家参考,具体内容如下 最近项目里有个需求要做个滚动选择器,在网上找了半天也没找到合适的demo,没办法只能发挥我的聪明才...
    99+
    2024-04-02
  • 微信小程序自定义日期选择器
    日期选择器是我们在写项目的过程中经常遇到的,有需要标题的选择器,也有不需要标题的选择器 今天给大家带来一个自定义的时间选择器,废话不多说,直接上代码 第一步:先创建一个picker的...
    99+
    2024-04-02
  • 微信小程序中怎么实现一个picker多列选择器
    微信小程序中怎么实现一个picker多列选择器,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、效果图(多列)二、普通选择器:mode = selector、多列选择器:m...
    99+
    2023-06-20
  • 微信小程序中怎么自定义一个多列选择器
    这篇文章给大家介绍微信小程序中怎么自定义一个多列选择器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。在.wxml建一个自定义picker组件:<picker  &nbs...
    99+
    2024-04-02
  • 实现微信小程序中的多级联动选择器效果
    实现微信小程序中的多级联动选择器效果,需要具体代码示例随着微信小程序的普及和发展,越来越多的开发者开始关注小程序的开发技巧和实现效果。其中,多级联动选择器是小程序中常见的一种选择器效果,能够提供良好的用户体验和交互效果。本文将介绍如何在微信...
    99+
    2023-11-21
    微信小程序 选择器 多级联动
  • 微信小程序城市选择器如何实现
    这篇文章主要讲解了“微信小程序城市选择器如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序城市选择器如何实现”吧!城市选择器 region//index.wxml<pic...
    99+
    2023-06-26
  • 微信小程序日期选择器如何使用
    本文小编为大家详细介绍“微信小程序日期选择器如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序日期选择器如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。需求:在小程序开发中,时常会遇到日期选...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作