<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. 20155229实验三 《Java面向对象程序设计实验三 敏捷开发与XP实践 》实验报告

    实验题目 1.在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找出一项让自己感觉最好用的功能. 2.下载搭档实验二的Complex代 ...

  2. 20155328 2016-2017-2 《Java程序设计》 第十周学习内容总结

    20155328 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 JAVA和ANDROID开发学习指南 第22章 网络概览 两台计算机用于通信的语言叫做&qu ...

  3. 【bzoj3991】[SDOI2015]寻宝游戏 树链的并+STL-set

    题目描述 给出一棵树,初始每个点都是非必经的.多次改变某个点的必经状态,并询问从任意一个点出发,经过所有必经的点并回到该点的最小路程. 输入 第一行,两个整数N.M,其中M为宝物的变动次数. 接下来的 ...

  4. 1109: [POI2007]堆积木Klo

    1109: [POI2007]堆积木Klo https://lydsy.com/JudgeOnline/problem.php?id=1109 分析: 首先是dp,f[i]表示到第i个的最优值,f[i ...

  5. Connect C# to MySQL

    Connect C# to MySQL using MySQL Connector/Net, Insert, Update, Select, Delete example, Backup and re ...

  6. npp基本设置

    经过实践,本人发现Notpad++是一个很不错的软件,无论是用于文档的读取还是开发,都很赞,那么给软件做一些基本的设置,使用的时候更得心用手就显得尤为重要了. 本文主要介绍npp的基础设置,后期会不断 ...

  7. PHP自定义生成二维码跳转地址

      比较简单的一款PHP自定义生成二维码跳转地址,手机端微信扫码,自动跳转到定义好的链接.支持自定义生成二维码尺寸.间距等.    鼠标悬浮显示二维码弹出层,离开后消失.js实现,代码如下: $(fu ...

  8. vue 跳转到外部 后回跳

    微信  vue 跳转到外部 后回跳  ,比如登陆 授权操作 .需要 路由 先跳转到一个中间页面 后再跳转到授权服务器!而不能跳转前的页面与回跳后的页面相同 不然回跳可能会出现空白 路由不解析.

  9. 最大公共子串:DP

    标题:最大公共子串 最大公共子串长度问题就是:求两个串的所有子串中能够匹配上的最大长度是多少. 比如:"abcdkkk" 和 "baabcdadabc",可以找 ...

  10. centos 系统初始化

    centos 系统初始化 #!/bin/bash # author cfwl create date of 2012-10-21 # blog http://cfwlxf.blog.51cto.com ...