H5访问页面跳转:
直接在浏览器输入页面 如: http://localhost:5174/#/pages/request/request
小程序访问页面跳转 pages.json中:
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "请求页面", //模式名称
"path": "pages/request/request", //启动页面,必选
//"query": "id=4000&name=zs" //启动参数,在页面的onLoad函数里面得到。
}
]
}
下拉刷新:
API:onPullDownRefresh | uni-app官网 (dcloud.net.cn)
<template>
<view>
<view class="">下拉刷新Demo</view>
<view v-for="(item,index) in list" :key="index">
{
{item}}
</view>
<button type="default" @click="onPull">下拉刷新</button>
</view>
</template>
<script>
export default {
data() {
return {
list: ["java", 'php', "Ai", "大数据"]
}
}, onPullDownRefresh() {
console.log("触发了下拉事件")
//设置停止
setTimeout(() => {
//修改数据
this.list = ["大数据1", "java1", "php1", "Ai1"]
//停止下拉刷新
uni.stopPullDownRefresh()
}, 2000)
},
methods: {
//方法2 触发下拉刷新
onPull() {
console.log("通过按钮点击事件,触发下拉事件")
uni.startPullDownRefresh()
//设置停止 延迟2秒
setTimeout(() => {
//修改数据
this.list = ["大数据2", "java2", "php2", "Ai2"]
//停止下拉刷新
uni.stopPullDownRefresh()
}, 1000)
}
}
}
</script>
<style>
</style>
上拉加载
页面 | uni-app官网 (dcloud.net.cn)
<template>
<view>
<view class="">下拉刷新Demo</view>
<view class="box-item" v-for="(item,index) in list" :key="index">
{
{item}}
</view>
<button type="default" @click="onPull">下拉刷新</button>
</view>
</template>
<script>
export default {
data() {
return {
list: ["java", 'php', "Ai", "大数据","java", 'php', "Ai", "大数据","java", 'php', "Ai", "大数据"]
}
},/* onPullDownRefresh() {
console.log("触发了下拉事件")
//设置停止
setTimeout(() => {
//修改数据
this.list = ["大数据1", "java1", "php1", "Ai1"]
//停止下拉刷新
uni.stopPullDownRefresh()
}, 2000)
},*/
//上拉滑动到底部默认距离50px 触发
//可在pages.json里定义具体页面底部的触发距离onReachBottomDistance
onReachBottom(){
console.log("触发了快到底部了 默认50px onReachBottom事件")
//数组扩容
this.list=[...this.list,...["新数据1","新数据2","滴滴..."]]
},
methods: {
//方法2 触发下拉刷新
onPull() {
console.log("通过按钮点击事件,触发下拉事件")
uni.startPullDownRefresh()
//设置停止 延迟2秒
setTimeout(() => {
//修改数据
this.list = ["大数据2", "java2", "php2", "Ai2"]
//停止下拉刷新
uni.stopPullDownRefresh()
}, 1000)
}
}
}
</script>
<style>
.box-item{
height: 200rpx;
}
</style>