大家好,又见面了,我是你们的朋友全栈君。
微信小程序,循环下拉列表,点击时只展开其中一个
这是效果
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.js
var 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 () {
}
})
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/127833.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...