微信小程序多选取值判断显示内容

写微信小程序项目的时候遇到多选框选值通过id来判断内容切换

这里是通过wxs来实现的

wxml

<wxs module="calc">function getId(arr, id) {return arr.indexOf(id)}module.exports = {getId: getId,}
</wxs>
<view class="lb1"><view class="lb2">经营</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>
<!-- //内容 -->
<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代表存的数组的变量名 ，‘3’代表选择值对应的id（不是写死的）

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});},// 点击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})// 转为字符串let detailValue = this.data.sales_scenes_type.filter(it => it.selected).map(it => it.value)this.setData({sales_scenes_types: detailValue.join(',') //转为字符串})//存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;
}

微信小程序多选取值判断显示内容相关推荐

微信小程序通过场景值判断从什么路径进入微信小程序
下面博主将会通过图文讲解的方式分享关于通过场景值判断是从什么途径进入到本微信小程序中,最后附上源码! 判断从什么路径进入到微信小程序所以需要获取场景值. 途径1:app.js 以下是微信小程序项目源 ...
微信小程序创建项目后无法显示内容
我遇见这个问题属于其一,建议多找几种办法因为我一星期之前为了做其他项目,下载了其他的开发工具最后把工具卸载掉,重新安装新版的稳定版. 问题完美解决!!! 开始创建项目,项目创建完后, 普通编译和页 ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序开发入门要学哪些内容
微信小程序开发入门要学哪些内容?微信小程序需要学习的知识点:注册登录.开发工具安装.配置.样式.组件.微信小程序数据渲染.网络请求API.获取用户信息API等,了解开发者工具.原生框架.模板语法.组件 ...

微信小程序多选取值判断显示内容

微信小程序多选取值判断显示内容相关推荐

最新文章

热门文章