<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. node从搭建运行项目整体流程

    1. 初始化配置基本信息: npm init (自定义配置) npm init -y (一切配置采用默认值) 在当前目录产生package.json文件,有一个dependencies用来记录该项目所 ...

  2. Matlab_GUI

    1.GUI中控件的属性 BackgroundColor 控件的背景 FontSize  控件字体的大小

  3. # 20155224 2016-2017-2 《Java程序设计》第10周学习总结

    20155224 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 密码学: 主要是研究保密通信和信息保密的学科, 包括信息保密传输和信息加密存储等. 密码学 ...

  4. [arc063F]Snuke's Coloring 2-[线段树+观察]

    Description 传送门 Solution 我们先不考虑周长,只考虑长和宽. 依题意得答案下限为max(w+1,h+1),并且最后所得一定是个矩形(矩形内部无点). 好的,所以!!!答案一定会经 ...

  5. Eclipse 使用过程中的问题及解决方法

    1.Eclipse中java文件和jsp字体大小设置 1.更改所有文件的字体显示大小过程: Window->preferences->General->Appearance-> ...

  6. C#课后小作业

    有关C#基础的练手 跟大家一起分享下 1.让用户输入一个100以内的数 打印1-100之间所有的数,用户输入的数除外 2.让用户输入一个100以内的数 打印1-这个数之间所有的数的和 3.使用一个fo ...

  7. 二、利用EnterpriseFrameWork快速开发Web系统(B/S)

    EnterpriseFrameWork框架实例源代码下载: 实例下载 本章通过一个开发实例来讲解Web系统的开发经过,以及会碰到的一些问题.实例功能就是业务系统中最常见的增.删.改.查来演示,用一个界 ...

  8. hdu2065"红色病毒"问题(指数母函数+快速幂取模)

    "红色病毒"问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  9. Selenium2+python自动化-xpath定位语法

    前言    在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语 ...

  10. Java EE JSP内置对象及表达式语言

    一.JSP内置对象 JSP根据Servlet API规范提供了一些内置对象,开发者不用事先声明就可使用标准变量来访问这些对象. JSP提供了9种内置对象: (一).request 简述: JSP编程中 ...