小程序选中效果demo CSS画对号与箭头icon

1024祝大家节日快乐！
废话不多说先看图：

点击前：

点击后：

是很常用到的两个图标；
用CSS渲染出来要比读取图片要好得多。
上代码：
WXML:

<!--index.wxml-->
<view class="container">
<view class="position" bindtap="tapselect"><view class="selected" wx:if="{{selected}}" ><view class="selectedIcon" ></view></view><view class="select" ></view>
</view><view class="position" bindtap="tapUnfold"><view class="unfoldIcon" wx:if="{{unfolded}}" ><view class="unfolded"  ></view></view><view class="unfoldIcon" wx:if="{{!unfolded}}"><view class="unfold"   ></view></view>
</view>
</view>

WXSS:

/**index.wxss**/
page{width: 100%;height: 100%;
}
.container{width: 100%;height: 100%;display: flex;}
.position{display: flex;position: relative;}.select{width: 34rpx;height: 34rpx;border-radius: 50%;border: 1px solid #000;position: absolute;left: 20rpx;top: 20rpx;}.selected{width: 34rpx;height: 34rpx;position: absolute;left: 22rpx;top: 22rpx;border-radius: 50%;background-color: #000;}.selectedIcon{width: 12rpx;height: 20rpx;border-bottom: 4rpx solid #fff;border-right: 4rpx solid #fff;transform: rotate(45deg);margin: 0 auto;}.unfold{width: 20rpx;height: 20rpx;border-top: 2rpx solid #000;border-right: 2rpx solid #000;transform: rotate(45deg);position: absolute;left: 95rpx;top: 20rpx;}.unfolded{width: 20rpx;height: 20rpx;border-bottom: 2rpx solid #000;border-right: 2rpx solid #000;transform: rotate(45deg);position: absolute;left: 100rpx;top: 20rpx;}

JS：

Page({/*** 页面的初始数据*/data: {selected:false,unfolded:false,},tapselect: function (options) {console.log("点了")this.setData({selected: !this.data.selected,})},tapUnfold: function (options) {console.log("点了2")this.setData({unfolded: !this.data.unfolded,})},})

在项目中的效果：

小程序选中效果demo CSS画对号与箭头icon相关推荐

小程序抽奖效果demo滚筒抽奖3d动画抽奖(附代码以及随机中奖处理)
前言: 最近公司要求做一个抽奖的页面,然后看到设计稿的一刻眉头一皱,这事没那么简单最开始是用translateY但是效果太生硬了而且不方便二次抽奖或者多次抽奖找了半天决定用3d来做成一个滚轮这样的好 ...
【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
前言一提小程序与动画,首先想到的是什么?嗯,微信小程序独创了一套动画玩法,官方支持3种动画方案,分别是 createAnimation . this.animate 和 CSS3动画 . 1. cr ...
微信小程序圆盘抽奖（扇形画圆）
微信小程序圆盘抽奖(扇形画圆) 前言提示:这里可以添加本文要记录的大概内容: 例如:领导安排做一个微信小程序的转盘抽奖,要求可以复用,动态的修改抽奖的板块个数,由于是第一次做微信小程序踩了很多的坑, ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/to ...
小程序今日头条demo
运行环境开发工具:微信web开发者工具版本: 微信web开发者工具 v0.12.130400 适配: 适用于微信web开发者工具中所有模拟器的机型 demo介绍 1.本demo分为2个模块首页 ...
python日历小程序_微信小程序日历效果
本文实例为大家分享了微信小程序日历效果的具体代码,供大家参考,具体内容如下源码下载地址项目需要一个日历功能,花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文 ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类
小程序中的WXSS(css)选择器课程-伪类-:last-child 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topi ...
微信小程序官网DEMO模板
简介: 微信小程序官方原版DEMO模板,小程序开发参考必备人手一份,分享给大家. 网盘下载地址: http://kekewangLuo.cc/xtsm1j0hn5X0 图片:

小程序选中效果demo CSS画对号与箭头icon

小程序选中效果demo CSS画对号与箭头icon相关推荐

最新文章

热门文章

小程序 选中效果demo CSS画对号与箭头icon

小程序 选中效果demo CSS画对号与箭头icon相关推荐

最新文章

热门文章

小程序选中效果demo CSS画对号与箭头icon

小程序选中效果demo CSS画对号与箭头icon相关推荐