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

微信小程序,循环下拉列表,点击时只展开其中一个这是效果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)


相关推荐

  • pcl点云合并_pcl点云重建

    pcl点云合并_pcl点云重建本节记录下点云聚类方法1.欧式聚类分割方法//为提取点云时使用的搜素对象利用输入点云cloud_filtered创建Kd树对象tree。pcl::search::KdTree::Ptrtree(newpcl::search::KdTree);tree-&amp;amp;gt;setInputCloud(cloud_filtered);//创建点云索引向量,用于存储实际的点云信息首先创…

    2022年10月21日
  • 51单片机流水灯的三种实现方法「建议收藏」

    51单片机流水灯的三种实现方法「建议收藏」首先,介绍下原理。下图为主控芯片和流水灯模块的原理图。流水灯模块接在单片机的P1口,由原理图可以知道,在P1口给一个低电平即可点亮LED灯。相反,如果要LED灯熄灭,就要把P1口的电平变为高电平即可。要实现流水灯功能,我们只要将LED1~LED8依次点亮、熄灭,依始类推,8只LED变会一亮一暗的做流水灯了。              实现8个LED流水灯程序用中

  • jdk卸载不干净解决办法

    jdk卸载不干净解决办法Win7系统下安装jdk报错;错误信息:“ WindowsInstaller程序包有问题。此安装需要的DLL不能运行。请与您的支持人员或程序包开发商联系”。造成该问题的原因是系统以前安装过jdk,重新安装需要彻底卸载旧的jdk,这样重新安装才能成功。但是,打开控制面板——卸载程序,卸来卸去总是报错错误还是“ WindowsInstaller程序包有问题。此安装需要的DLL不能运行。…

  • Latex数学公式-求导、分数的表示

    Latex数学公式-求导、分数的表示表示方法\frac{}{}:分数表示\partial:偏导符号代码效果意义\frac{x}{y}xy\frac{x}{y}yx​分数\partial∂\partial∂偏导符号举例$$\frac{\partialy}{\partialx_1}+\frac{\partialy}{\partialx_2}$$显示效果如下:∂y∂…

  • SSH框架总结(框架分析+环境搭建+实例源代码下载)

    SSH框架总结(框架分析+环境搭建+实例源代码下载)

    2021年11月14日
  • Python学习笔记(15)-Python代码转换为exe可执行程序详解

    Python学习笔记(15)-Python代码转换为exe可执行程序详解一,简介Python写完程序,要靠命令执行那么行,太低调了,还不华丽了。再说别人的电脑,都没有Python库,怎么执行,还能不能愉快的一起玩耍了。所以哪怕只会写一个HelloWorld,也要弄成exe程序,方便伟大的代码传播事业。其实很简单,有一个现成的pyInstaller工具,直接用就是了。二,pyInstaller安装配置1,打开网址:pyInstalller下载网址如图:因为我的Pyth

发表回复

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

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