day03

页面导航

声明式导航

编程式导航

声明式导航

1.1 导航到tabBar

<navigator url="page/message/message" open-type="switchTab">导航到消息页面<navigator>

1.2导航到非tabBar

<navigator url="page/home/home" open-type="navigate"></navigator>

1.3后退导航

<navigator open-typr="navigateback" detial="1"></navigator>

1.4 导航传参

<navigator url="/page/message/message?id=3&name=ze"><navigator>

编程式导航

wx:switchTab

<button blindtop="gotomessage"></button>

gotomessage(){
	wx:switchTab({
		URL:'/pages/message/message'
	})
}

2.1导航到非tabBar页面
wx:navigateTo(object,object)

2.2导航回去
wx:navigateBack(object,object)

2.3导航传参

gotomessage(){
	wx:switchTab({
		url:"/page/message/message?id=3"
	})
}

onload接收传参

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到：

onload :function(option){
	//option就是参数对象
}

页面下拉刷新

enablePulldownRefresh BOOLEAN false 是否开启下拉刷新

下拉刷新样式
backgroundcolor 背景颜色
backgroundTextStyle 原点

监听页面下拉刷新事件
.js中有onpulldoenRefresh函数

1 设置wx;startPulldownDownRefresh 开始下拉刷新
2 wx:stoppulldownRefresh 停止

上拉触底

上拉触底 onReachbottom

步骤1
在全局或者页面json文件开启下拉触底事件 onReachbottomdistanch 设置距离

步骤2实现案例

1 定义随机颜色

data:[{
	colorList:[]
}],
getcolor(){
	wx:request({
		url:"https://www.wscosk.cn/api/color",
		method:"GRT",
		success:({data:res})=>{
			this.setdata({
				colorlist[{...this.data.colorlist,...res.data}]
			})
		}
	})
},
onload(option){
	this.getcolor()
}

2 渲染ui美化效果

<view wx:for="{{colorlist}}" wx:id="index" class="item" style="background-color:rgb({{item}})">{{item}}</view>

.item{
	height:200rpx;
	width:80%；
	line-height:200rpx;
	text-align:center;
	margin:60px auto;
}

3 上拉触底时调用颜色方法

onReachBottom(){
	this.getcolor();
}

4添加loding效果
wx:showloading(object,object)

getcolor(){
	wx:showloading({
		title:"数据加载中"
	})
	wx:request({
		url:"https://www.wscosk.cn/api/color",
		method:"GRT",
		success:({data:res})=>{
			this.setdata({
				colorlist[{...this.data.colorlist,...res.data}]
			}),
			complate:() =>{
				wx:hideloading();
			}
		}
	})
}

5 节流设置

生命周期

1 onlanch 初始化完成后调用
2 onhide 后台时调用
3 onshow 启动时调用
4 onerror 错误时调用

wxs

1 内嵌wxs

<view >{{m1.toUpper("hello")}}</view>
<wxs moudel="m1">
	model.export.toUpper =function(dtr) {
		return str.toUpper
	}
</wxs>