Display and hide functions of many lists of wechat applets (with source code)

Keywords: github

;

Today, there is a problem in the project. Before that, the display and hiding of single list on the front page of the project can be realized by wx:if judgment. Now, how to realize the single display and hiding of multiple lists? If you still use wx:if to implement it, you will click a list item, multiple lists will be displayed and hidden at the same time, which is obviously not suitable for the functional requirements. Then you simply check the data and find no similar function. Finally, after thinking about it, you will slowly clear your mind

design sketch:
Show and hide.gif
Implementation ideas:
  • To show and hide a single list, you should use unique elements to let the program know which list items you should show and hide, and you can use the data id;
  • In css, a hidden{display: none} is defined to control the display and hiding, and then it is judged by ternary operator;
  • wxml defines a click event to dynamically modify the variable value of this list item.
Function realization:

OK, when you have the idea, start to use code validation according to the idea. Sure enough, after using the code implementation, I found that my thinking is still right. This function node can also be applied to display and hide other similar lists.

Example code:
<!--pages/myOrder/myOrder.wxml-->
<view class='container'>
  <!-- Order list -->
  <block wx:for-items="{{carInfoData}}">
    <view class='card  b-shadow' bindtap='toggleBtn' id="{{item.id}}">
      <view class='nearCard-fl'>
        <image src='{{item.imgurl}}'></image>
      </view>
      <view class='nearCard-fr'>
        <view>Date:
          <text class='c-green'>{{item.useDate}}</text>
        </view>
        <view>Model:
          <text class='c-green'>{{item.cx}}</text>
        </view>
        <view>Duration:
          <text class='c-green'>{{item.time}}</text>
        </view>
        <view>cost:
          <text class='c-green'>{{item.feiyong}}</text>
        </view>
      </view>
      <view class='down clearfix {{uhide==item.id?"":"hidden"}}'>
        <view class='ml30'>Start time: 2018.01.01 11:33</view>
        <view class='ml30'>End time: 2018.01.01 11:33</view>
        <view class='ml30'>Rental area: LongQin, bay, Taohua Island Scenic Area, Zhoushan City</view>
        <view class='feedBack'>Feedback</view>
      </view>
    </view>
  </block>
</view>
// pages/myOrder/myOrder.js
Page({

  /**
   * Initial data of the page
   */
  data: {
    uhide: 0
  },

  /**
   * Life cycle function -- listening to page loading
   */
  onLoad: function (options) {
    var that = this;

    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        },
        {
          "id": 2,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        },
        {
          "id": 3,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        },
        {
          "id": 4,
          "imgurl": "../../images/car.png",
          "useDate": "2017-12-22",
          "cx": "Chery EQ1",
          "time": "1 hour",
          "feiyong": "20 element"
        }
      ]
    };
    //console.log(data.datas);
    //Set up vehicle display information
    that.setData({
      carInfoData: data.datas
    })
  },

  //Click to toggle hide and show
  toggleBtn: function (event) { 
    var that = this;
    var toggleBtnVal = that.data.uhide;
    var itemId = event.currentTarget.id; 
    if (toggleBtnVal == itemId) {
      that.setData({
        uhide: 0
      })
    } else {
      that.setData({
        uhide: itemId
      })
    } 
  }
})

GitHub source address: Applet show and hide

Posted by mediabob on Mon, 04 May 2020 08:33:15 -0700