微信小程序，循环下拉列表，点击时只展开其中一个
这是效果
1.wxml
!-- bigwarp --view class="dewarp"view class='com-selectBox' wx:for="{{detil}}" wx:for-item="item" wx:key="" view class='com-sContent' bindtap='showList' data-id='{{item.repairitemsetid}}' view class='com-sTxt'{{item.repairitemsetname}}/view view class="caricon" image data-id='{{id}}' src="../../images/icon/carDetails1.png" class='com-sImg {{imgshow&&"select_img_rotate"}}' /image/view /view view class=" {{item.isShow?'show':'hide'}}" !-- -- view wx:for="{{notice}}" wx:for-item="item" wx:key="" class='com-sItem' i-row !-- -- i-col span="15" i-class="" view class="cb" checkbox-group bindchange="checkboxChange" label class="checkbox" checkbox value="{{item.name}}" checked="{{item.checked}}"/{{item.repairitemname}} /label /checkbox-group /view /i-col !-- -- i-col span="9" i-class="carmoney" view class="carpropectdo" view class="carpropectdollows"input/input元/view /view /i-col /i-row /view !-- -- /view/view/view!-- end --2,wxss
/* bigwarp */.rotateRight{ transform: rotate(180deg) }.com-selectBox{ width: 90%; margin: 0 auto;}.com-sContent{ /* border: 1px solid #e2e2e2; */ background: white; font-size: 16px; line-height: 30px; box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(85, 85, 85, 0.13); border-radius: 20rpx; height: 100rpx; margin-top: 40rpx; display: flex; justify-content: space-between; align-items: center;}.com-sImg{ width: 16px; height: 9px;}.caricon{ /* border: 1px solid black; */ right: 10px; display: flex; justify-content: center; align-items: center; width: 15%; height: 100%;}.com-sTxt{ width: 15%; /* border: 1px solid black; */ height: 100%; display: flex; justify-content: center; align-items: center;}.com-sList{ box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(85, 85, 85, 0.13); width: inherit; position: absolute; box-sizing: border-box; z-index: 3; max-height: 120px; overflow: auto;}.com-sItem{ height: 55px; line-height: 35px; padding: 0 6px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px;}.com-sItem:first-child{ border-top: none;}.dewarp{ margin: 0 auto; width: 100%;}.carpropectdo{ padding: 10px 10px;}.carpropectdollows{ width:90%; border: 1rpx solid #D1D1D1; display: flex; justify-content: center; align-items: center; padding: 0 10rpx; color: #999999; font-size: 32rpx; height: 27px;}.checkbox checkbox{ padding:0 5rpx;}.checkbox{ font-size: 13px;}.cb{ padding: 13rpx 5rpx;}.hide{ display: none;}.select_img_rotate{ transform:rotate(180deg); }/* end */3.wxjs
// pages/a/a.jsvar app = getApp()Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { app.login().then(() = { this.carDetailtitle(), this.carDetail() }) }, showList(e) { let index = 0; let arrayItem = this.data.detil;//获取循环数组对象 for (let item of arrayItem) { //如果当前点击的对象id和循环对象里的id一致 if (item.repairitemsetid == e.currentTarget.dataset.id ) { //判断当前对象中的isShow是否为true（true为显示，其他为隐藏） if (arrayItem[index].isShow == "" || arrayItem[index].isShow == undefined) { arrayItem[index].isShow = "true" imgshow: !this.data.imgshow } else { arrayItem[index].isShow = "" imgshow: !this.data.imgshow } } index++; } //将数据动态绑定 this.setData({ detil: arrayItem }) }, carDetailtitle(down) { var a = app.data libs.post('接口', { miniopenid: a.openid, carplate: a.carplate }, down).then(res = { console.log(JSON.parse(res)) this.setData({ detil: JSON.parse(res), }) }) }, carDetail(down) { var a = app.data libs.post('接口', { miniopenid: a.openid, carplate: a.carplate, rcid: 7 }, down).then(res = { console.log(JSON.parse(res)) this.setData({ notice: JSON.parse(res), }) }) }, checkboxChange: function (e) { console.log('checkbox发生change事件，携带value值为：', e.detail.value) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})
