微信小程序实现打分效果代码整理

一、微信小程序点击对应点击高亮

js代码

Page({
  data: {
    list: [1, 2, 3, 4, 5],
    active: 0
  },
  itemClickOne(e){
    var num=e.currentTarget.dataset.value;
    this.setData({
      active:num
    });
  },
})

wxml代码

<view class="list">
  <view class="item {
   
   {item==active?'active':''}}" wx:for="{
   
   {list}}"
  bind:tap="itemClickOne"
  data-value="{
   
   {item}}"
  >{
   
   {item}}</view>
</view>

css代码

.list {
  border: 1px solid red;
  padding: 50px;
  text-align: center;
}

.list .item {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 30px;
  margin-right: 20px;
}
.list .item.active{
  background-color: red;
}

二、微信小程序实现打分功能效果

js代码 如上

wxml代码

<view class="list">
  <view class="item {
   
   {item<=active?'active':''}}" wx:for="{
   
   {list}}"
  bind:tap="itemClickOne"
  data-value="{
   
   {item}}"
  >{
   
   {item}}</view>
</view>

css如上

更多：

微信小程序分享、转发朋友、分享朋友圈使用整理

C# 微信支付敏感信息加解密解决方案

C# 使用 RSA 加密算法生成证书签名产生“The system cannot find the file specified”异常