background

In the small program TAB option switch is a very common effect, for a fixed number of TAB switch may be easy, but if there are more than one, for some novice, but do not know how to control

After you finish reading this article, you will get

Two ways to achieve TAB switching effect, whenever similar needs in the future, can be achieved (emphasis of this article)

Effect of instance

Concrete implementation code

Wechat WXML code

<view> <view class="tab-container"> <view class="default {{type=='expend'? 'expend-active': "}}" bindtap="handleType" data-type="expend" > expenditure </view > <view class="default {{type=='earning'? 'earning-active': }}" bindtap="handleType" data-type="earning" > </view > <view class="default {{type=='transaccount'? 'transaccount-active': '}}" bindtap="handleType" data-type="transaccount" transfer </view> </view> </view>Copy the code

Wechat WXSS code

/* pages/tablistchange/tablistchange.wxss */
.tab-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
}

.tab-container .default {
  margin-right: 25rpx;
  padding: 5rpx 15rpx;
}

.expend-active {
  color: #0ca168;
  border-bottom: 2px solid #0ca168;
}

.earning-active {
  color: #ff6b6a;
  border-bottom: 2px solid #ff6b6a;
}

.transaccount-active {
  color: #abcdef;
  border-bottom: 2px solid #abcdef;
}
Copy the code

Switch logic JS code

Page({
  /** * initial data for the page */
  data: {
    type: 'expend',},/** * lifecycle function -- listens for page loading */
  onLoad: function(options) {},

  handleType(event) {
    const type = event.currentTarget.dataset.type;
    this.setData({
      type: type, }); }});Copy the code

The example looks like this:

Analysis of the

To implement TAB switching, it is mainly to bind the bindtap function to the switching element, and then set the data-xxx= “attribute on the switching element. The bound event object will carry extra information, such as :dataset, etc., you can get different data attribute values set on the switching element in the event object. Reset the setData value

When the switch is implemented, it is mainly to switch the class, in WXML, based on the type dynamic value, interpolation expression, and ultimately decide which active state style to load

This kind of fixed TAB switching is obviously possible, but the question is, what if there are more than one? What if there are no fixed tabs?

Dynamic TAB switching is not fixed

The following example effect

The following is WXML

<view class="encourage-content"> <view class="encorage-title">{{accountlist.encourtitle}}</view> <view class="encourage-list"> <block wx:for="{{listData}}" wx:key="*this"> <view data-item="{{item}}" class="list-item {{item.account == accountlist.account ? 'list - active' : '}} "bindtap =" handleList "> $< text > {{item. The account}} < / text > < view > < block > < view > < / view >Copy the code

Here is the sample WXSS code

.encourage-content {
  text-align: center;
  padding: 30rpx 80rpx 0 80rpx;
}
.encourage-content .encorage-title {
  padding-bottom: 30rpx;
  color: #ff6b6a;
}
.encourage-content .encourage-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.encourage-content .encourage-list .list-item {
  width: 31%;
  height: 80rpx;
  border: 1px solid #dddd;
  margin-bottom: 15rpx;
  line-height: 80rpx;
}
.encourage-content .encourage-list .list-active {
  color: #ff6b6a;
  border: 1px solid #ff6b6a;
}
Copy the code

Here is the logical JS code

// pages/tablistchange/tablistchange.js
Page({
  /** * initial data for the page */
  data: {
    accountlist: {
      // Initialize a target object
      account: 2.encourtitle: 'Two orioles singing green willows',},listData: [
      // Loop over the list data
      {
        account: 2.encourtitle: 'Two orioles singing green willows'}, {account: 3.encourtitle: 'In the company of three, there must be a teacher.'}, {account: 5.encourtitle: 'My life is long, my knowledge is long.'}, {account: 13.encourtitle: 'A line of egrets in the blue sky'}, {account: 14.encourtitle: 'Time flies, time flies, may you seize the day.'}, {account: 52.encourtitle: 'The only solution is to get rich.',}]},/** * lifecycle function -- listens for page loading */
  onLoad: function(options) {},

  // List switch
  handleList(event) {
    // console.log(event);
    this.setData({
      // Reassign the accountList object
      accountlist: event.currentTarget.dataset.item, }); }});Copy the code

Analysis of the

Multiple TAB switches are implemented with the help of an intermediate variable object accountList. First, the current data listData is iterated, and then events are bound to the switch element. At the same time, the data attribute value is set, and the parameter information carried by the event object is reassigned to the accountList object

The specified style is loaded in WXML by comparing the source object data (listData) to an attribute value in the newly assigned object data (AccountList) to determine if it is equal

This implementation is different from the above fixed switch. If you have used some VUE and React frameworks, you can achieve similar switch effect

As for the realization of payment in the case, cloud payment is involved, and it is not complicated to realize. By adding a form input box, binding data, and combining with cloud payment, the ordering function can be realized

Specific implementation of cloud payment function can refer to the small program – cloud development – wechat cloud payment function

The last

You can do something like this TAB switch, and sometimes, you know, two or three TAB switches know how to do that, but when you have multiple tabs, and they’re dynamic, you’re not going to be able to do that anymore, right

This time often need to use a third-party intermediate variable, and then compare with the value of an attribute in the source object, the attribute value of the source object can use the original, can also be added (such as ID) and so on, in short, there is a comparison with it, you can

Implement TAB – and multiple list options switch -https://coder.itclan.cn/