微信小程序，循環下拉列表，點擊時只展開其中一個

這是效果

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 () {

  }
})

總結

以上是生活随笔為你收集整理的微信小程序，循环下拉列表，点击时只展开其中一个「建议收藏」的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。