首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >微信小程序,循环下拉列表,点击时只展开其中一个「建议收藏」

微信小程序,循环下拉列表,点击时只展开其中一个「建议收藏」

作者头像
全栈程序员站长
发布2022-07-25 20:34:54
发布2022-07-25 20:34:54
1.5K0
举报

大家好,又见面了,我是你们的朋友全栈君。

微信小程序,循环下拉列表,点击时只展开其中一个

这是效果

1.wxml

代码语言:javascript
复制
<!-- 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

代码语言:javascript
复制
/* 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

代码语言:javascript
复制
// 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 () {

  }
})

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/127833.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 微信小程序,循环下拉列表,点击时只展开其中一个
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档