WeChat applet implements scoring effect code organization

1. Highlight corresponding clicks on WeChat applet

js code

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

wxml code

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

css code

.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;
}

2. WeChat applet implements scoring function

The js code is as above

wxml code

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

css as above

More:

WeChat applet sharing, forwarding to friends, and sharing in Moments use and organization

C# WeChat payment sensitive information encryption and decryption solution

C# uses the RSA encryption algorithm to generate a certificate signature and generates the "The system cannot find the file specified" exception.