[wechat applet development (IV)] applet fast actual combat classic problem navigation

---

Preface

Tips ： WeChat api More detailed in the document , Have the energy to read directly , This content is only for navigation summary

---

Tips ： The following is the main body of this article , The following cases can be used for reference

One 、wx:key The use of and wx:key Value

Example ： and vue Of :key Basically consistent There will be warning Tips

In general use

wx:key="unique"

character string , On behalf of the for Cyclic array in item One of the property, The property The value of needs to be a unique string or number in the list , And can't change dynamically .
Reserved keyword *this On behalf of the for In the loop item In itself , This expression requires item Itself is a unique string or number .

Two 、wx:for Usage of

And just in the same document ,wx:for and vue The difference is , He needs to specify the name of the loop variable and index, That is to say vue Medium （item,index）in list

Use wx:for-item You can specify the variable name of the current element of the array ,
Use wx:for-index You can specify the variable name of the array's current subscript

<view wx:for="{
    {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
    {
    idx}}: {
    {
    itemName.message}}
</view>

Two 、 Click event binding and parameter transfer

1 Click event bindtap binding

<view>{
   { msg }}</view>
<button bindtap="clickMe"> Click on the I </button>

Page({
    
  clickMe: function() {
    
    this.setData({
     msg: "Hello World" })
  }
})

2 bindtap Pass parameters

<view bindtap="goTo" data-index={
     {item.index}}>

goTo: function(e){
    
    //  Parameters passed 
    const index= e.currentTarget.dataset['index'];
}

3、 ... and 、 About WeChat applet style Dynamic binding problem

Here we need to have a template occupying idea class The same is true of dynamic binding Include animation

style="z-index:{
   {card.zIndex?card.zIndex:199 - card_index}}"

Four 、 The parent component dynamically transfers values to the child component

The parent component normally passes a dynamic variable

<nav-bar title=" meditation " scrollTop="{
     {scrollTop}}"></nav-bar>

Child components Monitor processing observer: ‘update’,

// component/navBar/navBar.js
Component({
    
    /** *  A list of properties of a component  */
    properties: {
    
        scrollTop: {
             
            type: String,    
            value: '0',     
            observer: 'update',
        }
    },

    /** *  A list of methods for a component  */
    methods: {
    
        update(newValue) {
    
            let op = 0;
            if (newValue != 0 && newValue <= 40) {
    
                op = newValue / 40
            }
            if (newValue >= 40) {
    
                op = 1;
            }
            this.setData(
                {
    
                    opacity: op
                }
            )
    	},
    }
})
  
  

5、 ... and 、 Get the dynamic distance to scroll up

onPageScroll(t) {
    
    this.setData({
    
        scrollTop: t.scrollTop
    })
}

6、 ... and 、 The child component calls the method of the parent component

Child components call init Pass parameters

this.triggerEvent('init', this.data.voiceArr[this.data.currentSelectIndex]);

Parent component binding bind:init Realization changeVoiceInit Method

<change-voice bind:closeVoiceShow="closeVoiceShow" bind:changeVoice="changeVoice" bind:init="changeVoiceInit" index="6"></change-voice>

7、 ... and 、 How does wechat applet realize page parameter transmission ？

After the incoming connection is required add to Parameters ?type=
wx.navigateTo({url: e.currentTarget.dataset[‘link’] + ‘?type=’+e.currentTarget.dataset[‘type’]+‘&index=’+e.currentTarget.dataset[‘index’]})

 onLoad: function(options) {
    
     // options.type  Can get   similar query
 }

8、 ... and 、 The solution to the problem of clicking repeatedly to jump to the page in wechat applet

You can also use the throttling function , Make a mark 1 Only once per second

this.data.navigateToFlag = true;
setTimeout(()=>{
    
  this.data.navigateToFlag = false;
},1000)
wx.navigateTo({
    url: '/pages/result/index?times=29&type=3&content= breathing '})

Nine 、style Binding dynamic background background-size invalid

hold background-size It can also be placed after binding

<view class="container" style="background: url('{
         {currentVoice.img}}') no-repeat;background-size: 100% 100%;">