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

最新推荐文章于 2023-08-15 17:04:31 发布

<s>LoCloudy</s>

最新推荐文章于 2023-08-15 17:04:31 发布

阅读量984

点赞数 1

文章标签：小程序 css绘制

本文链接：https://blog.csdn.net/weixin_42017905/article/details/102719844

版权

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