<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
})
},

微信小程序组件 自定义单选的更多相关文章

  1. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  2. 微信小程序 - 组件 | 自定义组件 | 组件事件传递页面

    组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建compon ...

  3. 微信小程序组件 自定义多选

    <view class='back'></view> <view class="container"> <!-- 睡眠记录 --> ...

  4. 微信小程序组件 自定义弹出框

    <!-- 点击立即抢拼弹出框 --> <view class='add-rob' bindtap="setModalStatus" data-status=&qu ...

  5. 微信小程序中自定义modal

    微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...

  6. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  7. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  8. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

  9. 微信小程序之自定义组件

    在微信小程序项目中 肯定会存在很多功能和样式上相似的部分 面对这种情况 只是单单的ctrl+c ctrl+v 就显得很low了,而且也不便于后期维护那么这时候 使用微信小程序中的自定义组件功能就很合适 ...

随机推荐

  1. leetcode-746-Min Cost Climbing Stairs(动态规划)

    题目描述: On a staircase, the i-th step has some non-negative cost cost[i] assigned (0 indexed). Once yo ...

  2. 20155210 2016-2017-2《Java程序设计》课程总结

    20155210 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 预备作业1:你期望的师生关系 预备作业2:做中学 预备作业3:虚拟机安装 第一周作业:教材 ...

  3. 20155308 加分项——C语言实现Linux的pwd命令

    20155308 加分项--C语言实现Linux的pwd命令 实现要求 学习pwd命令 什么是pwd pwd' 代表的是'Print Working Directory'(打印当前目录).如它的名字那 ...

  4. 基于 OpenCV 的人脸识别

    基于 OpenCV 的人脸识别 一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenC ...

  5. 1563: [NOI2009]诗人小G

    1563: [NOI2009]诗人小G https://lydsy.com/JudgeOnline/problem.php?id=1563 分析: 直接转移f[i]=f[j]+cost(i,j),co ...

  6. Drupal views 中合并显示字段

    如图, 需要显示如下数据表格 表格的第三列是由两个字段组成的.分别是title 标题字段和body 内容字段. 默认情况下,一列只显示一个字段.如何同时显示两个呢? 这个问题难不到强大的views,要 ...

  7. kobject和kset的一些学习心得

    #include <linux/module.h> #include <linux/kernel.h> #include <linux/kobject.h> #in ...

  8. CTF--zip伪加密

    刷题 一.BUGKU WEB 1. 变量1 知识点php两个$$是 可变变量,就是一个变量的变量名可以动态的设置和使用 $GLOBALS一个包含了全部变量的全局组合数组.变量的名字就是数组的键 < ...

  9. 使用Mininet创建网络拓扑

    使用Mininet创建Topo Python脚本实现创建拓扑 #coding:utf-8 from mininet.net import Mininet from mininet.topo impor ...

  10. openvpn部署

    原文发表于cu:2016-03-29 参考文档: 安装:http://qicheng0211.blog.51cto.com/3958621/1575273 安装:http://www.ipython. ...