devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序，循环下拉列表，点击时只展开其中一个_微信小程序for循环中的下拉菜单

作者：从前慢现在也慢 | 2024-02-11 21:54:11

赞

踩

微信小程序for循环中的下拉菜单

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

这是效果

1.wxml

  1. <!-- bigwarp -->
  2. <view class="dewarp">
  3. <view class='com-selectBox'  wx:for="{{detil}}"  wx:for-item="item" wx:key="">
  4.     <view class='com-sContent'  bindtap='showList' data-id='{{item.repairitemsetid}}'>
  5.         <view class='com-sTxt'>{{item.repairitemsetname}}</view>
  6.         <view class="caricon">
  7.         <image data-id='{{id}}' src="../../images/icon/carDetails1.png" class='com-sImg {{imgshow&&"select_img_rotate"}}'  ></image></view>
  8.     </view>
  9.     <view class=" {{item.isShow?'show':'hide'}}" >
  10.     <!--  -->
  11.         <view wx:for="{{notice}}" wx:for-item="item" wx:key="" class='com-sItem'>
  12.        <i-row >
  13.        <!--  -->
  14.        <i-col span="15" i-class=""> 
  15.        <view class="cb">
  16.        <checkbox-group bindchange="checkboxChange">
  17.             <label class="checkbox">
  18.               <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.repairitemname}}
  19.             </label>
  20.          </checkbox-group>
  21.          </view>
  22.      </i-col>
  23.      <!--  -->
  24.        <i-col span="9" i-class="carmoney">
  25.         <view class="carpropectdo">
  26.          <view class="carpropectdollows"><input></input>元</view>
  27.         </view>
  28.        </i-col>
  29.        </i-row>
  30.         </view>
  31.         <!--  -->
  32.     </view>
  33. </view>
  34. </view>
  35. <!-- end -->
  36.

2,wxss

  1. /* bigwarp */
  2. .rotateRight{
  3.   transform: rotate(180deg) 
  4. }
  5. .com-selectBox{
  6.     width: 90%;
  7.     margin: 0 auto;
  8. }
  9. .com-sContent{
  10.     /* border: 1px solid #e2e2e2; */
  11.     background: white;
  12.     font-size: 16px;
  13.     line-height: 30px;
  14.     box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(85, 85, 85, 0.13);
  15.     border-radius: 20rpx;
  16.     height: 100rpx;
  17.     margin-top: 40rpx;
  18.     display: flex;
  19.     justify-content:  space-between;
  20.     align-items: center;
  21. }
  22. .com-sImg{
  23.     width: 16px;
  24.     height: 9px;
  25. }
  26. .caricon{
  27.   /* border: 1px solid black; */
  28.   right: 10px;
  29.   display: flex;
  30.   justify-content: center;
  31.   align-items: center;
  32.   width: 15%;
  33.   height: 100%;
  34. }
  35. .com-sTxt{
  36.     width: 15%;
  37.     /* border: 1px solid black; */
  38.     height: 100%;
  39.     display: flex;
  40.     justify-content: center;
  41.     align-items: center;
  42. }
  43. .com-sList{
  44.     box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(85, 85, 85, 0.13);
  45.     width: inherit;
  46.     position: absolute;
  47.     box-sizing: border-box;
  48.     z-index: 3;
  49.     max-height: 120px;
  50.     overflow: auto;
  51. }
  52. .com-sItem{
  53.     height: 55px;
  54.     line-height: 35px;
  55.     padding: 0 6px;
  56.     text-align: left;
  57.     overflow: hidden;
  58.     text-overflow: ellipsis;
  59.     white-space: nowrap;
  60.     font-size: 14px;
  61. }
  62. .com-sItem:first-child{
  63.     border-top: none;
  64. }
  65. .dewarp{
  66.   margin: 0 auto;
  67.   width: 100%;
  68. }
  69. .carpropectdo{
  70.   padding: 10px 10px;
  71. }
  72. .carpropectdollows{
  73.   width:90%;
  74.   border: 1rpx solid #D1D1D1;
  75.   display: flex;
  76.   justify-content: center;
  77.   align-items: center;
  78.   padding: 0 10rpx;
  79.   color: #999999;
  80.   font-size: 32rpx;
  81.   height: 27px;
  82. }
  83.  
  84. .checkbox checkbox{
  85.     padding:0 5rpx;
  86. }
  87. .checkbox{
  88.   font-size: 13px;
  89. }
  90. .cb{
  91.   padding: 13rpx 5rpx;
  92. }
  93.  
  94. .hide{
  95.     display: none;
  96. }
  97. .select_img_rotate{
  98.  
  99.   transform:rotate(180deg); 
  100.  
  101. }
  102. /* end */

3.wxjs

  1. // pages/a/a.js
  2. var app = getApp()
  3.  
  4. Page({
  5.  
  6.   /**
  7.    * 页面的初始数据
  8.    */
  9.   data: {
  10.   
  11.   },
  12.  
  13.   /**
  14.    * 生命周期函数--监听页面加载
  15.    */
  16.   onLoad: function (options) {
  17.     app.login().then(() => {
  18.       this.carDetailtitle(),
  19.         this.carDetail()
  20.     })
  21.   },
  22.   showList(e) {
  23.     let index = 0;
  24.     let arrayItem = this.data.detil;//获取循环数组对象
  25.     for (let item of arrayItem) {
  26.       //如果当前点击的对象id和循环对象里的id一致
  27.       if (item.repairitemsetid == e.currentTarget.dataset.id ) {
  28.         //判断当前对象中的isShow是否为true（true为显示，其他为隐藏） 
  29.         if (arrayItem[index].isShow == "" || arrayItem[index].isShow == undefined) {
  30.           arrayItem[index].isShow = "true"
  31.           imgshow: !this.data.imgshow
  32.         } else {
  33.           arrayItem[index].isShow = ""
  34.           imgshow: !this.data.imgshow
  35.         }
  36.       }
  37.       index++;
  38.     
  39.       
  40.  
  41.     }
  42.     //将数据动态绑定 
  43.     this.setData({
  44.       detil: arrayItem
  45.     })
  46.   },
  47.   carDetailtitle(down) {
  48.     var a = app.data
  49.     libs.post('接口', {
  50.       miniopenid: a.openid,
  51.       carplate: a.carplate
  52.     }, down).then(res => {
  53.       console.log(JSON.parse(res))
  54.       this.setData({
  55.         detil: JSON.parse(res),
  56.       })
  57.  
  58.     })
  59.   },
  60.   carDetail(down) {
  61.     var a = app.data
  62.     libs.post('接口', {
  63.       miniopenid: a.openid,
  64.       carplate: a.carplate,
  65.       rcid: 7
  66.     }, down).then(res => {
  67.       console.log(JSON.parse(res))
  68.       this.setData({
  69.         notice: JSON.parse(res),
  70.       })
  71.  
  72.     })
  73.   },
  74.   
  75.  
  76.   checkboxChange: function (e) {
  77.     console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  78.   },
  79.   /**
  80.    * 生命周期函数--监听页面初次渲染完成
  81.    */
  82.   onReady: function () {
  83.  
  84.   },
  85.  
  86.   /**
  87.    * 生命周期函数--监听页面显示
  88.    */
  89.   onShow: function () {
  90.  
  91.   },
  92.  
  93.   /**
  94.    * 生命周期函数--监听页面隐藏
  95.    */
  96.   onHide: function () {
  97.  
  98.   },
  99.  
  100.   /**
  101.    * 生命周期函数--监听页面卸载
  102.    */
  103.   onUnload: function () {
  104.  
  105.   },
  106.  
  107.   /**
  108.    * 页面相关事件处理函数--监听用户下拉动作
  109.    */
  110.   onPullDownRefresh: function () {
  111.  
  112.   },
  113.  
  114.   /**
  115.    * 页面上拉触底事件的处理函数
  116.    */
  117.   onReachBottom: function () {
  118.  
  119.   },
  120.  
  121.   /**
  122.    * 用户点击右上角分享
  123.    */
  124.   onShareAppMessage: function () {
  125.  
  126.   }
  127. })

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。