持續(xù)更新~
1.不同頁面之間的傳值方式
1.1通過url
問號傳值
當前頁面
wx.navigateTo({
url: '/pages/aaa/aaa?userName=norma'
})
另一個頁面通過options
獲取到id
onLoad: function(options){
console.log(options.userName);
}
1.2通過定義全局變量
在app.js
中定義全局變量
App({
globalData: {
userName: 'norma'
}
})
在頁面中獲取
const app = getApp();
console.log(app.globalData.userName);// 'norma'
在任何頁面中設置
1.3通過本地緩存
wx.setStorage('userName','norma');
在頁面中獲取
wx.getStorage('userName');
2丁鹉、頁面與組件之間的方法調用
2.1子組件通過調用頁面的方法修改頁面中的數(shù)據(jù)
頁面中引用組件犹撒,綁定事件
<list bind:change='change'></list>
獲取
Page({
change(e) {
e.detail // 自定義組件觸發(fā)事件時提供的detail對象
}
})
子組件
需要使用 triggerEvent
方法坞生,指定事件名都哭、detail對象和事件選項,觸發(fā)事件的選項包括柒室,bubbles引颈,composed沦童,capturePhase
this.triggerEvent('change', {myEventDetail}, {})
2.2頁面調用子組件里的方法
頁面引入dialog組件中的方法
onReady: function () {
this.dialog = this.selectComponent('#dialog');
},
頁面中使用dialog組件中的方法
showDialog: function(){
this.dialog.show();
}
3.實現(xiàn)動畫效果
3.1使用官方提供的API
創(chuàng)建動畫對象,設置動畫撑教,導出動畫
let animation = wx.createAnimation({});
animation.rotate(180).step({duration:3000});
this.setData({rotateData: animation.export()})
使用動畫
<view animation='{{rotateData}}'></view>
3.2動態(tài)綁定class朝墩,簡單動畫可參考Animate.css
<view class="test {{isActive ? 'active':'' }}"></view>
4.表單的取值
4.1 獲取 event 中的值
當點擊<form>表單中 form-type 為 submit 的<button>組件時,會將表單組件中的 value 值進行提交伟姐,需要在表單組件中加上 name 來作為 key
Page({
formSubmit(e) {
console.log('提交的表單數(shù)據(jù)為:', e.detail.value)
}
})
4.2通過綁定事件設置變量值保存表單數(shù)據(jù)
<input bindinput="inputTitle" />
inputTitle: function (e) {
this.setData({
title: e.detail.value,
})
},