微信小程序-实现多选效果

wxml

<view class="page-section page-section-gap form">
        <view class="page-section-title">提醒时间(每日)</view>
        <view class="body-list" >
          <block wx:for="{
           
    {array}}" wx:key="index">
            <view class=list-item-choosed wx:if={
           
    {item.type=="choosed"}} data-index={
           
    {index}} bindtap=choose_item>
              <view class=item-choosed-txt>{
         
  {item.name}}</view>
            </view>
            <view class=list-item data-index={
           
    {index}} bindtap=choose_item wx:else>
              <view class=item-txt>{
         
  {item.name}}</view>
            </view>
          </block>
        </view>
    </view>

js文件

// pages/fund/add/add.js

import {
          
   
  findFundName
} from ../../../service/fund.js

import {
          
   
  addFundLook,getFundLook
} from ../../../service/fundlook.js

Component({
          
   
  /**
   * 组件的属性列表
   */
  properties: {
          
   

  },

  /**
   * 组件的初始数据
   */
  data: {
          
   
    array: [{
          
   
      tag: 1,
      name: 10:00,
      type : ""
    }, {
          
   
      tag: 2,
      name: 12:00,
      type : ""
    }, {
          
   
      tag: 3,
      name: 14:00,
      type : ""
    }, {
          
   
      tag: 4,
      name: 20:00,
      type : ""
    }]
  },

  /**
   * 组件的方法列表
   */
  methods: {
          
   
    choose_item(e){
          
   
      var data =  this.data.array[e.currentTarget.dataset.index]
      if(data[type] == choosed){
          
   
        data[type] = 
      }else{
          
   
        data[type] = choosed
      }
      this.data.array[e.currentTarget.dataset.index] = data
      this.setData({
          
   
        array: this.data.array
      })
    }
})

css文件部分

.list-item-choosed {
          
   
  width: 182rpx;
  height: 70rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background: rgb(51, 175, 61);
  border-radius: 6rpx;
  margin-right: 30rpx;
  padding: 0rpx 10rpx 0rpx 10rpx;
  margin-bottom: 30rpx;
}
 
.item-choosed-txt {
          
   
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color:rgb(255, 255, 255);
  line-height: 70rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
 
.list-item {
          
   
  width: 182rpx;
  height: 70rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background: rgba(240, 240, 240, 1);
  border-radius: 6rpx;
  margin-right: 30rpx;
  padding: 0rpx 10rpx 0rpx 10rpx;
  margin-bottom: 30rpx;
}
 
.list-item  .item-txt {
          
   
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 70rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

分享一个自己的小程序