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

微信小程序,循环下拉列表,点击时只展开其中一个这是效果1.wxml<!–bigwarp–><viewclass=”dewarp”><viewclass=’com-selectBox’wx:for=”{{detil}}”wx:for-item=”item”wx:key=””><viewclass=’co…

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

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

这是效果

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

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账号...

(0)
blank

相关推荐

  • 小心onpropertychange在ie8上的地雷[通俗易懂]

    onpropertychangeonpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的

  • Moya 浅析_motivationally

    Moya 浅析_motivationallyMoya是一个高度抽象的网络库,他的理念是让你不用关心网络请求的底层的实现细节,只用定义你关心的业务。且Moya采用桥接和组合来进行封装(默认桥接了Alamofire),使得Moya非常好扩展,让你不用修改Moya源码就可以轻易定制。官方给出几个Moya主要优点:编译时检查APIendpoint权限让你使用枚举定义各种不同Target,endpoints把stubs当做…

    2022年10月25日
  • HTML5简介

    HTML5简介HTML5是HTML的最新修订标准。2014年10月29日,万维网联盟(W3C)宣布,经过8年的努力,HTML5标准规范制定完成。HTML5的设计目的是在移动设备上使用多媒体。HT

    2021年12月27日
  • SMO算法最通俗易懂的解释

    SMO算法最通俗易懂的解释我的机器学习教程「美团」算法工程师带你入门机器学习已经开始更新了,欢迎大家订阅~任何关于算法、编程、AI行业知识或博客内容的问题,可以随时扫码关注公众号「图灵的猫」,加入”学习小组“,沙雕博主在线答疑~此外,公众号内还有更多AI、算法、编程和大数据知识分享,以及免费的SSR节点和学习资料。其他平台(知乎/B站)也是同名「图灵的猫」,不要迷路哦~SVM通常用对偶问题来求解,这…

  • 推荐系统——LR模型「建议收藏」

    推荐系统——LR模型「建议收藏」LR模型是广义线性模型。LR模型(对数几率回归模型),虽然叫回归,但是其本质为分类。对数几率函数是一种sigmoid函数。线性模型有可解释性强、易于并行的优点。但是其难以表示非线性关系,所以模型的准确性可能不好。为了增强原始特征与拟合目标之间的非线性关系,通常需要对原始特征做一些非线性转换。常用的转换方法包括:连续特征离散化、特征之间的交叉等。离散化相当于把连续函数变成分段函数来增加非线性…

    2022年10月13日
  • 暴力激活成功教程字典及字典生成器[通俗易懂]

    暴力激活成功教程字典及字典生成器[通俗易懂]GitHub上的:https://github.com/danielmiessler/SecLists/tree/master/Passwords/Leaked-Databaseshttps://

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号