微信小程序自定义选中样式打小勾

<view class="form-btn {{currentIndex==1?'form-active':''}}" id="1" bindtap="onDay">今 日</view>
<view class="form-btn {{currentIndex==2?'form-active':''}}" id="2" bindtap="onDay" style="float: right;">昨 日</view>

.form-btn {position: relative;display: inline-block;height:36px;width: 40%;text-align: center;line-height: 36px;border-radius: 5px;background: #eee;color: #777;
}
/* 选中时添加这个 样式 */
.form-active {background: #dae9fd;color: #23b8ff;
}/* 三角形 */
.form-active::before {content: '';display: inline-block;position: absolute;right: 0;bottom: 0;width: 0;height: 0;border-bottom: 20px solid #23b8ff;border-left: 20px solid transparent;
}
/* 小勾 */
.form-active::after {content: '';position: absolute;right: 1px;bottom: 5px;width: 8px;height: 4px;display: inline-block;border: 1px solid #fff;border-width: 0 0 1px 1px;transform: rotate(-45deg);-ms-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-o-transform: rotate(-45deg);vertical-align: baseline;
}

Page({data: {currentIndex: 1},onDay: function(e) {// 选中某个var that = this;that.setData({currentIndex: e.currentTarget.id})},
})

微信小程序自定义选中样式打小勾相关推荐

微信小程序自定义checkbox样式
微信小程序自定义checkbox样式 checkbox .wx-checkbox-input{width:16px;height:16px;} checkbox .wx-checkbox-input. ...
关于微信小程序自定义Picker样式的picker-view
这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker(picker-view)的基本用法这里就是一个很简单的自定义样式的Picker. 下面贴出代码 wxml: <picke ...
uni-app 微信小程序自定义radio样式
/* radio 选中后的样式 *//deep/ uni-radio .uni-radio-input.uni-radio-input-checked {background-color: #65D9 ...
微信小程序自定义表格样式
微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式 wxml: <view class="t ...
uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏
需求:要求小程序,中间的tabBar自定义凸起或者图标变大: 问题:查看uni-app的tabBar文档可知,小程序是不支持midButton的: 解决思路:隐藏uni-app原有的tabBar,然后 ...
小程序获取用户头像大图小程序获取用户头像模糊的问题小程序自定义转发头像模糊小程序自定义转发分享大图...
在开发小程序的时候,大家肯定有做过自定义转发分享图片的.我们现在做了一个名片小程序,需要做的一个功能就是,用户在转发分享自己的名片,在微信里显示的小程序缩略图,我们使用的是用户的微信头像,但是发现一个 ...
微信小程序 radio选中样式改为实心圆＜转载＞
wxml <radio-group bindchange="radioChange"><radio value="是" checked=&qu ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
微信小程序自定义类似微信联系人组件
微信小程序自定义联系人弹窗在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序 ...

微信小程序自定义选中样式打小勾

微信小程序自定义选中样式打小勾相关推荐

最新文章

热门文章