寫微信小程序項(xiàng)目的時(shí)候 遇到多選框選值通過(guò)id來(lái)判斷內(nèi)容切換

這里是通過(guò)wxs來(lái)實(shí)現(xiàn)的

wxml

<wxs module="calc">function getId(arr, id) {return arr.indexOf(id)}module.exports = {getId: getId,} </wxs> <view class="lb1"><view class="lb2">經(jīng)營(yíng)</view><view class="lb3" bindtap="showDialog"><text class="weui" wx:for="{{list}}">{{item}}</text></view></view><!-- 多選 --> <view class="free-dialog {{ showDialog ? 'free-dialog--show' : '' }}"><view class="free-dialog__mask" /><view class="free-dialog__container"><view style="padding: 5% 5% 15%;"><view class="end"><view class="ends" bindtap="toggleDialogs">取消</view><view class="endd" bindtap="checkboxChanges">確定</view></view><view wx:for="{{sales_scenes_type}}" wx:key="index" bindtap="checkboxChange" data-value="{{item.name}}"data-id="{{item.id}}" data-index="{{index}}" checked="{{item.selected}}"class="btn {{item.selected ? 'btn-selected' : ''}}">{{item.name}}</view></view></view></view> <!-- //內(nèi)容 --> <view class="subject" wx:if="{{calc.getId(sales_id,1)!=-1}}"><view class="subject_text">id:1</view> </view> <view class="subject" wx:if="{{calc.getId(sales_id,2)!=-1}}"><view class="subject_text">id:2</view> </view> <view class="subject" wx:if="{{calc.getId(sales_id,3)!=-1}}"><view class="subject_text">id:3</view></view><view class="subject" wx:if="{{calc.getId(sales_id,4)!=-1}}"><view class="subject_text">id:4</view></view>

calc.getId(sales_id,3)!=-1
sales_id代表存的數(shù)組的變量名 ，‘3’代表選擇值對(duì)應(yīng)的id（不是寫死的）

js

data:{sales_id:[1],showDialog: false,list: ['線下門店'],sales_scenes_type:[{id: 1, name: "門店"},{id: 2, name: "門店1"},{id: 3, name: "門店2"},{id: 4, name: "門店3"},] }// 顯示showDialog: function () {this.setData({showDialog: !this.data.showDialog,})},// 取消toggleDialogs() {this.setData({showDialog: !this.data.showDialog});},// 確定checkboxChanges(e) {console.log(e)this.setData({showDialog: !this.data.showDialog,list: this.data.lists});},// 點(diǎn)擊checkboxChange(e) {console.log(e);let string = "sales_scenes_type[" + e.target.dataset.index + "].selected"this.setData({[string]: !this.data.sales_scenes_type[e.target.dataset.index].selected})// 轉(zhuǎn)為字符串let detailValue = this.data.sales_scenes_type.filter(it => it.selected).map(it => it.value)this.setData({sales_scenes_types: detailValue.join(',') //轉(zhuǎn)為字符串})//存idlet detailValues = this.data.sales_scenes_type.filter(it => it.selected).map(it => it.id)console.log(detailValues)// 變量名(顯示在wxml里)let detailValueN = this.data.sales_scenes_type.filter(it => it.selected).map(it => it.name)this.setData({sales_id: detailValues, //存idlists: detailValueN})},

wxss

.lb1 {width: 94%;height: 94rpx;border-bottom: 3rpx solid #EAEAEA;margin: auto;display: flex;align-items: center;justify-content: space-between; } .lb2 {width: auto;height: 94rpx;line-height: 94rpx;font-size: 29rpx;color: #000;}.lb3 {width: auto;height: 94rpx;line-height: 94rpx;color: #333333;display: flex;align-items: center; } /* */ .free-dialog__mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;background: rgba(0, 0, 0, 0.7);display: none;}.free-dialog__container {position: fixed;left: 0;bottom: 0;width: 750rpx;background: white;transform: translateY(150%);transition: all 0.4s ease;z-index: 11;}.free-dialog--show .free-dialog__container {transform: translateY(0);}.free-dialog--show .free-dialog__mask {display: block;}.shows{width: auto;height: 94rpx;line-height: 94rpx;color: #333333;display: flex;align-items: center;}.weui{margin-right: 8rpx;font-size: 28rpx;color: #808080;}.end{width: 90%;height: 100rpx;display: flex;margin: auto;justify-content: space-between; } .ends{font-size: 30rpx; } .endd{font-size: 30rpx;color: #076BFF; } .btn{font-size: 24rpx;padding: 12rpx 19rpx;border: 1px solid #dcdcdc;background: #F8F8F8;border-radius: 10rpx;/* margin-right: 30rpx; */margin-bottom: 22rpx;text-align: center;/* display: inline-block; */color: #666666; } .btn:nth-child(5) { margin-right: 0; } .btn-selected{border: 1px solid #FF7C80;color: #F73C41;background: #FFFFFF; }

總結(jié)

以上是生活随笔為你收集整理的微信小程序多选取值判断显示内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。