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

	大家好，一个小程序多选样式，分享给大家希望带给大家一点方便。
	先上效果图

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

分享一个自己的小程序

结束，欢迎转载，欢迎大家评论区多提意见，觉得有帮助的可以关注支持我。