首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

微信小程序:多选功能实现(复选框样式和功能)

  • 25-03-06 22:42
  • 4040
  • 11107
blog.csdn.net

小程序开发中,多选的功能十分常见,微信小程序开发文档也提供了复选框组件,但是实际开发中,复选框的样式要求只使用文档中提供的组件不能满足,所以需要修改原有的复选框样式,或通过其他方式实现。

1.文档中的复选框

 附微信开发文档地址:checkbox | 微信开放文档、checkbox-group | 微信开放文档

微信小程序提供的复选框组件checkbox组件本身没有提供事件,所以一般配合checkbox-group使用。但是checkbox组件样式只能通过color属性改变选中颜色,不能实现其他样式修改,这里提供一种思路,可以用于修改微信开发文档中组件的样式。

1.找到文档中对应的组件页面,找到示例代码,然后打开控制台,选中代码示例中的结构,就可以选取要修改样式的标签,找到后在样式表中找到样式可以先修改看一下效果。如下:

2.复制对应的选择器名称到wxss中修改样式即可。例如:将checkbox改为圆形,颜色改为红色

 上述方法可以应用于微信小程序中的其他组件。

2.自己实现复选框

如果复选框的样式和微信小程序文档提供的样式差异较大,则可以自己实现复选框样式和功能。如下:

  1. <view class="channel_list">
  2. <view class="channel_item" wx:for="{{channelList}}"
  3. wx:key="index"
  4. data-checked="{{item.checked}}"
  5. data-code="{{item.knowChannelCode}}"
  6. bindtap="toSelect">
  7. <image class="icon"
  8. src="{{item.checked?activeIcon:inactiveIcon}}">
  9. image>
  10. <text class="channel_text">{{item.knowChannelName}}text>
  11. view>
  12. view>

3.通过UI组件库实现

可以使用第三方组件库中的复选框组件,这里提供的是Vant Weapp库Vant Weapp - 轻量、可靠的小程序 UI 组件库

具体使用方法参考官网。

注:本文转载自blog.csdn.net的前端小白持续学习ing的文章"https://blog.csdn.net/weixin_70354927/article/details/142976747"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2492) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

119
小程序
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2024 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top