Wechat applet development (5) — data binding, operation, style import, page jump

---

Data binding

The official documentation

The dynamic data in WXML comes from the data corresponding to the Page.

Simple binding

Data binding uses Mustache syntax to wrap variables around variables that work with:

Example: Calling data data

In JavaScript:

 data: { 
    name:"Zhao Liying".arr: ["Jody"."Stuart"],}Copy the code

Data in JavaScript is called in WXML

<view wx:if="{{isFlag}}"> {{name}} </view>
<view wx:if="{{isFlag}}"> {{arr[0]}} {{arr[1]}} </view>
Copy the code

Running results:

Example: Set hidden, via wx:if

JavaScript:

data: { 
    name:"Zhao Liying".arr: ["Jody"."Stuart"].arr1: ["a"."b"."c"."d"].obj: {name:"Oh oh".age:40
    },
    active:"kkkk".isFlag:true.num:0
  },
// A custom hiding method
closeHandle:function(){
    console.log("Click")
    console.log(this.data.isFlag)
    // Change a value and render it to the page, not directly with this.data
    // this.data.isFlag = false
    this.setData({
      isFlag:false})},// Custom display method
  openHandle:function(){
    this.setData({
      isFlag:true})},// Custom click show and hide toggle methods
changeHandle:function(){
    this.setData({
      isFlag:!this.data.isFlag
    })
  },
Copy the code

In WXML

<view wx:if="{{isFlag}}"> {{name}} </view>
<view wx:if="{{isFlag}}"> {{arr[0]}} {{arr[1]}} </view>
<view class='{{ active }}' wx:if="{{isFlag}}"> {{ obj.name }} {{ obj.age }}</view>
<! Bindtap wx:if="true" -->
 <view wx:if="{{isFlag}}">See if it's hidden</view>

 <! -- Bind event :bindtap=" event handler "-->
<view class='img' wx:if="{{isFlag}}">
  <image src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7b2063a4f85d95b37ec3a061c47b9c1.jpg?thumb=1&w=358&h=252'></image>
</view>
<! -- <view > {{num}} </view> -->
 <view class='f1'>
  <button bindtap='closeHandle'>hidden</button>
  <button bindtap='openHandle'>According to</button>
  <button bindtap='addHandle'>increase</button>
  <button bindtap='changeHandle'>Click on the cut</button>
 </view>
Copy the code

Operation effect:

 

Example: wx:for uses an index to retrieve data from an array

Wx :for automatically generates the number of labels based on the number of arrays

Code in WXML:

<! Item is the value of the array,index is the index --> 
<view wx:for="{{ arr }}">{{ item }}</view>
 <view wx:for="{{ arr1 }}">{{index}}----{{ item }}</view> -->
 <! -- data- variable name data-index -->
<view bindtap='ch'>
  <view  wx:for="{{ arr1 }}" data-index='{{index}}'>{{item}}</view>
</view>
Copy the code

JavaScript:

data: { 
    arr: ["Jody"."Stuart"].arr1: ["a"."b"."c"."d"],},ch:function(e){
    console.log(e.target.dataset.index)
    console.log(e)
  }
Copy the code

Running results:

 

operation

The ternary operation

Initially set the value of flag to true or false

<view hidden="{{flag}}"> Hidden </view>
Copy the code

  data: {
    flag:false
  },
Copy the code

Now, the way we do triple operations, it’s the same

<view hidden="{{flag ? true : false}}"> Hidden </view>
Copy the code

 

Arithmetic operations

A =5, B =8, c=10

<view>{{a + b}} + {{ c }} + {{ 1+3 }}</view>
Copy the code

 data: {
    a:5.b:8.c:10
  },
Copy the code

 

Logical operations

Length > 5 to false

<view wx:if="{{length > 5}}">aaaaaaaaa </view>
Copy the code

data: {
    length:3
  },
Copy the code

Running results:

Length > 5 to true

data: {
    length:30
  },
Copy the code

Running results:

 

Style import

The @import statement can be used to import an external style sheet, followed by the relative path of the external style sheet to be imported, using; End of statement

You need to use relative paths

Imported XIAOMI’s WXSS

/* pages/xiaomi/xiaomi.wxss */
/* Background color */
page{
  background-color: red;
}
Copy the code

Now the yun.wXSS table

/* pages/yun/yun.wxss */
@import ".. /xiaomi/xiaomi.wxss";
Copy the code

Running results:

Example: top navigation bar

JavaScript code:

/** * initial data for the page */
  data: {
    tabIndex:0.tablist: ['recommendations'.'mobile phone'.'smart'],},ch:function(e){
    console.log(e.target.dataset.index);
    this.setData({
      tabIndex: e.target.dataset.index
    })
    
  },
Copy the code

WXML:

<! --pages/test1/test1.wxml-->
<view class='a' bindtap='ch'>
<! If tabIndex==index, execute active action 0 == 0 active 1 == 1 active 2 == 1 active -->
  <view wx:for="{{ tablist }}" data-index="{{index}}" class="{{ tabIndex==index? 'active':'' }}"> {{item}} </view>
</view>

<view class='wrap' wx:if="{{ tabIndex ==0 }}">Mobile phone</view>
<view class='wrap' wx:if="{{ tabIndex ==1 }}">recommended</view>
<view class='wrap' wx:if="{{ tabIndex ==2 }}">smart</view>
Copy the code

WXSS:

/* pages/test1/test1.wxss */

.a{
  display: flex;
  height: 40px;
  background-color: gray;
}
.a>view{
  width: 50px;
}
.active{
  color: orange;
  border-bottom: 2px solid orange;
}
Copy the code

Running results:

 

Page jump

You can define a method to perform this kind of page jump, (pass a numerical jump path to the jump page?) .

Jump to the normal page we can use

wx.navigateTo({
      // Can write relative path, can write absolute path
      url: url,
    })
Copy the code

Instead, jump tabbar defined pages can be used

// Jump to the tabbar page
wx.switchTab({
    url: '/pages/index/index',})Copy the code

Sometimes we tend to assign to urls, so we can write urls by concatenating strings.

There are two ways of stitching:

• Concatenate string method 1: use the + sign

var url = '.. /test1/test1? id=' + e.currentTarget.dataset.id+'&name=aaa';
Copy the code

• Concatenate string method 2: ${variable name}

var url = `.. /tiao2/tiao2? id=${e.currentTarget.dataset.id}&name=bbb`
Copy the code

 

Example: plain jump

Initial page WXML:

<! -- Jump to page method -->
<view bindtap='toclass' data-id='1'>Jump 1</view>
<view bindtap='toclass' data-id='2'>Jump 2</view>
<view bindtap='toclass' data-id='3'>Jump 3</view> 
<view bindtap='toclass' data-id='4'>Jump 4</view>
<view bindtap='tofu'>The 01 page is displayed</view> 
Copy the code

Initial page JS:

 toclass:function(e){
    // What is the path to the jump page?
    console.log(e.currentTarget.dataset.id);
    / / '.. /test1/test1? id=1230'
    // Concatenate string method 1: use the + sign
    // var url = '.. /test1/test1? id=' + e.currentTarget.dataset.id+'&name=aaa';
    // Concatenate string method 2: ${variable name}
    var url = `.. /tiao2/tiao2? id=${e.currentTarget.dataset.id}&name=bbb`
    // Go to the normal page
    wx.navigateTo({
      // Can write relative path, can write absolute path
      url: url,
    })
  },
  tofu:function(){
    // wx.navigateTo({
    // url: '.. /index/index',
    // })
    // Jump to the tabbar page
    wx.switchTab({
      url: '/pages/index/index',}}),Copy the code

Jump to page TIao2 WXML:

<view>{{name}}</view>
<view>* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *</view>
Copy the code

Jump to page tiao2 JS:

/** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    console.log(options.id);
    this.setData({
      name: options.id,
    })
  },
Copy the code

Running results:

 

 

 

 

 

 

Learn together and make progress together. If there are any mistakes, please comment