<view class='userperson'>
<view class='f30 flexca'>请选择您的注册身份</view>
<view class='select-only f30'>
<view class='flexa '>
<view class="so-3 flexca {{selectIndex==0?'active1':''}}" data-selectIndex='0' bindtap='selectFn'>
<view class="so-2 {{selectIndex==0?'active2':''}}"></view>
</view>
<text>老师</text>
</view>
<view class='flexa'>
<view class="so-3 flexca {{selectIndex==1?'active1':''}}" data-selectIndex='1' bindtap='selectFn'>
<view class="so-2 {{selectIndex==1?'active2':''}}"></view>
</view>
<text>校长</text>
</view>
<view class='flexa'>
<view class="so-3 flexca {{selectIndex==2?'active1':''}}" data-selectIndex='2' bindtap='selectFn'>
<view class="so-2 {{selectIndex==2?'active2':''}}"></view>
</view>
<text>普通用户</text>
</view>
</view>
</view>
.userperson{
margin-top: 40rpx;
}
.userperson>view:first-child{
color: #14a1fd;
}
button{
margin-top: 70rpx;
width: 100%;
border-radius: 50rpx;
color: white;
">#14a1fd;
box-shadow: 0 0 4rpx 1rpx rgba(20,161,253,0.7)
}
.select-only{
width: 100%;
display: flex;
justify-content: space-between ;
align-items: center;
margin-top: 30rpx;
}
.so-3{
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 1px solid #7C7C7C;
margin-right: 20rpx;
}
.so-2{
width: 24rpx;
height: 24rpx;
border-radius: 50%;
">transparent;
}
.select-only .active1{
border: 1px solid #14a1fd;
}
.select-only .active2{
">#14a1fd;
}
data:
selectIndex:0,
selectFn:function(e){
let selectIndex = e.currentTarget.dataset.selectindex;
this.setData({
selectIndex: selectIndex
})
},

转载于:https://www.cnblogs.com/dianzan/p/8327717.html

微信小程序组件 自定义单选相关推荐

  1. 微信小程序实现自定义单选功能(二维数组模式)

    公司有这样的需求,因为每个学校的布局不一样所以字段不是固定的,后台可自定义添加任意组合,所以后端返回的是一个二维数组. list:[ {name: '建筑',id: 19,group_pid: 0,s ...

  2. 微信小程序,自定义导航栏组件

    微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客 可定义设置的内容如下: 文字及返回箭头颜色 背景图片(优先级高于 ...

  3. 微信小程序 配置自定义组件代码按需注入 lazyCodeLoading

    微信小程序 配置自定义组件代码按需注入 lazyCodeLoading 官方网址 在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...

  4. 微信小程序组件、路由、组件通信、侦听器

    一.微信小程序组件 组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件 组件是视图层的基本组成单元. 组件自带一 ...

  5. vant组件搜索并选择_Vant Weapp - 有赞出品的免费开源微信小程序组件库

    轻量可靠的小程序UI组件库,主流移动组件库 Vant 的微信小程序版本. Vant Weapp 和 Vant 的区别 之前推荐过的移动端web组件库 Vant 是 Vue.js 版本的,其对内承载了有 ...

  6. 微信小程序可以加服务器上的字体,微信小程序中自定义字体

    微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...

  7. 微信小程序之——自定义分享按钮(完整版)

    声明 onShareAppMessage 函数 onShareAppMessage() { return {          title: '弹出分享时显示的分享标题'        desc: ' ...

  8. 微信小程序wepy自定义card控件封装

    微信小程序wepy自定义card控件 在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...

  9. 【微信小程序】自定义加载动画4

    目录 效果图 配置文件 结语 效果图 配置文件 配置方法参考上一篇文章:[微信小程序]自定义加载动画 组件源代码: Component({behaviors: [],properties: {

最新文章

  1. 真厉害用python只要50行代码爬取黑丝美眉纯欲高清图
  2. DBA_Oracle基本体系内存和进程结构(概念)
  3. 阿里P7架构师谈:MySQL慢查询优化、索引优化、以及表等优化总结
  4. unity fixedupdate_unity相关
  5. 在熟练使用2B铅笔前,请不要打开Axure
  6. 三星Galaxy S22 Ultra真机首曝:颜值与实力并存堪称完美
  7. 数据中心多余的热量去哪儿了?
  8. 解决IP地址冲突的方法--DHCP SNOOPING
  9. (转)通过 Javacore 诊断线程挂起等性能问题
  10. Vue 返回记住滚动条位置详解
  11. XLSTransformer生成excel文件
  12. 34个省域统计年鉴合集(32省更新至2020年)
  13. 一封没有读出来的感谢信,勾勒出蔡文胜30年创业史!
  14. iOS网络编程---根据URL下载网络文件的方法
  15. 【跨境电商】EDM邮件营销完整指南(二):如何开展EDM营销活动
  16. H5 的直播协议和视频监控方案
  17. 大众-OBD-接口位置
  18. 阿里云盾技术强在哪里?轻松防御DDoS、CC攻击 1
  19. 怎么给领导做项目汇报
  20. 2022年中职组网络安全数据库渗透题目

热门文章

  1. oracle asm参数优化,关于ASM参数文件的问题
  2. The Wave kernel Signature: A Quantum Mechanical Approach to shape Analysis
  3. AI学习笔记(十四)CNN之图像分割
  4. 数据挖掘实践(金融风控)——task02:数据分析
  5. featuretools,可自动构造机器学习特征的Python库
  6. 各大厂商CTR广告预估模型的优缺点对比
  7. 使用sklearn进行数据挖掘
  8. hdu 1045 Fire Net
  9. 就这样进入了前端开发
  10. 进阶~Qt程序启动画面