基于微信的weui框架编写单选按钮组件

最新推荐文章于 2024-03-08 15:34:50 发布

VIP文章杨ni

最新推荐文章于 2024-03-08 15:34:50 发布

阅读量1.2w

点赞数

分类专栏： js 文章标签： css html 框架 javascript 组件

本文链接：https://blog.csdn.net/lyliyangzi/article/details/72916813

版权

公司的项目经常需要使用单选按钮选择类型，下面看图：

如果每需要一次这样的单选按钮就要重新写一次css,html,js。下面放代码

css代码：

 .selected:before{
            content: "\EA06";
            background-color:#FFFFFF;
            color: #e98758;
        }

html代码：

最低0.47元/天解锁文章

优惠劵

杨ni

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
基于微信的weui框架编写单选按钮组件

写一两次还好，如果多个页面需要多个这样的单选按钮，那代码量较大，而且需要复制粘贴大量的代码。
复制链接

扫一扫

专栏目录

基于微信WeUI的移动网站开发设计源码

03-29

这是一个基于微信WeUI的移动网站开发设计，使用Javascript、HTML、JavaScript、PHP、CSS和Go语言开发，包含201个文件。主要文件类型包括91个HTML文件、29个JavaScript文件、21个JPG图片文件、17个PNG图片文件、10个PHP文件、6个TTF字体文件、5个JSON文件、4个CSS文件、2个Markdown文档和2个MP3文件。该项目是一个微信WeUI扩展组件，非常适合微信公众号前端开发和移动网站开发，增加了数倍的组件，非常适合需要强大功能的移动网站和公众号开发。适合用于个人学习和实践Javascript、HTML、PHP和CSS的开发技术。

WeUI—微信官方UI库

weixin_34348174的博客

10-29

5241

WeUI 为微信 Web 服务量身设计概述 WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。使用方法一：使用bower进行安装 bower install --save weui ...

3 条评论您还未登录，请先登录后发表或查看评论

webui之单选框操作学习

qq_45948176的博客

03-08

133

判断当前单选按钮是否选中状态。定位单选按钮 点击女性。

基于vue的UI框架集锦(移动端+pc端)

热门推荐

赵乘风_i

04-26

7万+

1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约，是我喜欢的风格 star 2.3k中文文档在线预览2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。中文文档在线预...

weUI-Button

qq_39285660的博客

01-17

7850

只需要添加相应的class类，再根据项目需求进行改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用法</title>  <meta name="viewport" content="width=device-width,initial-sca

微信小程序开发之——WeUI快速上手

我的博客

10-19

1373

一概念这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一支持扩展库导入，不占用小程序体积二 WeUI介绍 2.1 WeUI下载 Github-Tencent/weui-wxss 2.2 项目导入小程序解压后，用微信开发者工具打开dist目录 2.3 WeUI组件介绍编号大分类组件 1 表单 button、input、form、list、Slidev

基于weui上传组件的二次封装

whyrookie的博客

07-27

628

　　公司千万级用户应用继续上新功能了，这次新功能主要迭代是小程序，让小程序支持发布商品功能，这是封装weui上传组件的原因，又是因为工作才去做的事情，我真是个不主动学习的人，先自责一下；这次记录主要是考虑到其中的实现有很多小程序开发的细节，实现方案比较low，但是还是记一下这个上传图片+视频的组件，其它文件上传也是同理。先来看看weui的上传组件　　　　从UI的角度来看，明显是用flex布局，view元素来实现整体布局。我们的需求是: 长按后可拖拽换文件位置如果是图片，需要先压缩尺寸...

weui实现微信网页模板（主页，购物车，分类，后台等等）

咖啡味的小认真

04-24

2205

试试

微信weui+扩展组件，适合微信公众号前端开发和移动网站开发

06-16

微信weui+扩展组件,非常强大,增加数倍的组件，适合微信公众号前端开发和移动网站开发,。WeUI+基于Zepto1.2和weui1.13等众多开源项目参考而成的,接近100个组件/插件,最目前全网效果最全的MobileUI.

微信WeUI app ui kit .fig素材下载

04-20

微信WeUI app ui kit .fig素材下载

weui-2.0 仿微信前端框架

07-03

weui是微信开发团队设计的仿微信界面的移动端手机页面，使用起来使页面与微信界面更加统一。

【毕业设计】基于weui框架和腾讯地图的ofo共享单车微信小程序【源码】.zip

最新发布

03-22

【毕业设计】基于weui框架和腾讯地图的ofo共享单车微信小程序【源码】.zip 【毕业设计】基于weui框架和腾讯地图的ofo共享单车微信小程序【源码】.zip 【毕业设计】基于weui框架和腾讯地图的ofo共享单车微信小程序...

weui 弹框中的单选效果

weixin_34279579的博客

01-07

1811

<div class="weui_dialog_alert" id="doctorSexDialog" style="display: none;"> <div class="weui_mask"></div&am

微信小程序踩坑之一【weui-wxss-master单选按钮图标修改思路】

weixin_30371875的博客

06-08

638

小程序原生所带的weui框架做小程序UI实在太方便了，但是他的一些细微变化也是让开发中碰到不少头疼的问题一直以来单选多选的美化都是设计师重点表达的地方之一而weui-wxss-master中的单选多选样式又写的与众不同，不同与常规的weui添加after伪类来显示不同，他是通过type="success_no_circle"来实现的，所以无论怎么更改icon或icon的after或bef...

weui单选按钮获取的选中的值为“on”的解决办法

weixin_44110923的博客

09-02

588

weui单选按钮获取的选中的值为“on”的解决办法

weui实现（单列选择器）

小白的博客

10-18

1141

1、插入weui的js，css和vue.js（weui的css和js版本需要对应）  <link rel="stylesheet" href="/static/weui/weui.min.css"> <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script&gt

weui学习总结——1、weui表单常用标签

zhengyikuangge的博客

08-28

1万+

weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档，所以这篇博客就当是方便以后开发而使用吧。按钮效果图如下:普通按钮<a class="weui-btn weui-btn_primary">普通按钮</a>刷新按钮<a class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-lo

php weui单选框样式,weui 弹框中的单选效果

weixin_29924309的博客

03-13

605

医生性别男女确定$('#saveDoctorSex').click(function(){var doctorSex = $("input[name='sex']:checked").val();console.log("3416456" + doctorSex);$('#doctorSexShow').html(doctorSex);});layer&period;open弹框中的表单数...

小程序中的单选按钮逻辑与复选按钮

03-05

2080

单选按钮逻辑 //js radioChange: function (e) { console.log('radio发生change事件，携带value值为：', e.detail.value); var radioItems = this.data.radioItems; for (var i = 0, len = radioItems.length; i < l...

微信小程序 weui 编写多选投票

03-31

微信小程序 weui 编写多选投票的步骤如下： 1. 创建一个新的小程序项目，并引入 weui 库。 2. 创建一个投票页面，包含一个投票主题和多个投票选项。 3. 使用 weui 的 checkbox 组件来实现多选功能，每个选项对应一个 checkbox。 4. 为每个 checkbox 绑定一个 change 事件，当用户选择或取消选择时触发。 5. 在 change 事件中，记录用户的选择状态，统计投票结果。 6. 在提交按钮的点击事件中，将投票结果提交到后台服务器。 7. 在投票结束后，展示投票结果，包括每个选项的得票数和百分比。示例代码如下： ``` <view class="page"> <view class="vote-title">请选择你喜欢的颜色：</view> <view class="vote-options"> <label class="weui-cell weui-check__label" wx:for="{{options}}" wx:key="{{item.id}}"> <view class="weui-cell__hd"> <checkbox value="{{item.id}}" checked="{{item.checked}}" bindchange="onOptionChange" /> </view> <view class="weui-cell__bd">{{item.name}}</view> </label> </view> <button class="weui-btn" bindtap="onSubmit">提交</button> </view> <script> Page({ data: { options: [ { id: 1, name: '红色', checked: false }, { id: 2, name: '绿色', checked: false }, { id: 3, name: '蓝色', checked: false } ], selectedOptions: [] }, onOptionChange: function(event) { const optionId = event.detail.value; const checked = event.detail.checked; const options = this.data.options; options.forEach(option => { if (option.id === optionId) { option.checked = checked; } }); this.setData({ options: options }); if (checked) { this.setData({ selectedOptions: [...this.data.selectedOptions, optionId] }); } else { this.setData({ selectedOptions: this.data.selectedOptions.filter(id => id !== optionId) }); } }, onSubmit: function() { const selectedOptions = this.data.selectedOptions; // TODO: 提交选项到后台服务器 // 展示投票结果 const options = this.data.options; const totalVotes = selectedOptions.length; options.forEach(option => { const votes = selectedOptions.filter(id => id === option.id).length; option.votes = votes; option.percent = totalVotes === 0 ? 0 : Math.round(votes / totalVotes * 100); }); this.setData({ options: options }); } }) </script> ```

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交