文章目录
前言
提示:微信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>
二、点击事件绑定和传参
<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%;">