【微信小程序开发（四）】小程序快速实战经典问题导航

---

前言

提示：微信api文档中更细致，有精力可以直接阅读，该内容只做导航 总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、wx:key的使用及wx:key的值

示例：和vue的:key基本是一致的 不加会有warning 提示

一般使用

wx:key="unique"

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

二、wx:for的用法

和刚刚在同一个文档可以看到，wx:for和vue不同的是，他需要自己指定循环变量名字和index，也就是vue中的（item,index）in list

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名

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

二、点击事件绑定和传参

1 点击事件用 bindtap绑定

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

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

2 bindtap传递参数

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

goTo: function(e){
    // 传递的参数
    const index= e.currentTarget.dataset['index'];
}

三、关于微信小程序style动态绑定问题

在这里需要有一个模板占位的思想 class动态绑定也是这样 包括animation

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

四、父组件给子组件动态传值

父组件正常传递一个动态变量

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

子组件 监听处理 observer: ‘update’,

// component/navBar/navBar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        scrollTop: {         
            type: String,    
            value: '0',     
            observer: 'update',
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        update(newValue) {
            let op = 0;
            if (newValue != 0 && newValue <= 40) {
                op = newValue / 40
            }
            if (newValue >= 40) {
                op = 1;
            }
            this.setData(
                {
                    opacity: op
                }
            )
    	},
    }
})
  
  

五、获取向上滚动的动态距离

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

六、子组件调用父组件的方法

子组件 调用init 传递参数

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

父组件绑定 bind:init 实现changeVoiceInit 方法

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

七、微信小程序如何实现页面传参？

在需要传入的连接后 添加 参数 ?type=
wx.navigateTo({url: e.currentTarget.dataset[‘link’] + ‘?type=’+e.currentTarget.dataset[‘type’]+‘&index=’+e.currentTarget.dataset[‘index’]})

 onLoad: function(options) {
     //  options.type 即可获取  类似query
 }

八、微信小程序连续点击多次跳转页面问题的解决办法

用节流函数也可以，记个标记 1秒内只执行一次

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

九、style 绑定的动态的背景图 background-size失效

把 background-size 也放在绑定后置即可

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