pages.json里面配置:
condition启动模式配置:启动模式配置,仅在开发期间生效,用于模拟直达页面的场景,如小程序转发后,用户点击所打开的页面
"condition":{
"current":0,
"list":[
{
"name":"新闻页",
"path":"subpages/news/news",
"query":"id=80"
}
]
}
属性 | 类型 | 是否必填 | 描述 |
current | 数字 | 是 | 当前激活的模式,list节点的索引值 |
list | 数组 | 是 | 启动模式列表 |
list说明:
属性 | 类型 | 是否必填 | 描述 |
name | 字符串 | 是 | 启动模式名称 |
path | 字符串 | 是 | 启动页面操作 |
query | 字符串 | 是 | 启动参数,可在页面的onLoad函数里获得 |
组件基本使用
image组件有默认宽高,导致图片有裁剪,通过mode属性进行图片的缩放模式
mode属性说明,默认值:'scaleToFill' 长边=高,短边=宽
模式 | 值 | 说明 |
缩放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
缩放 | aspectFill | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
缩放 | widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
缩放 | heightFix | 高度不变,宽度自动变化,保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3 |
裁剪 | top | 不缩放图片,只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片,只显示图片的底部区域 |
裁剪 | center | 不缩放图片,只显示图片的中间区域 |
裁剪 | left | 不缩放图片,只显示图片的左边区域 |
裁剪 | right | 不缩放图片,只显示图片的右边区域 |
裁剪 | top left | 不缩放图片,只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片,只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片,只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片,只显示图片的右下边区域 |
事件:点击事件@click
页面的下拉
换成7秒后打印
页面的触底
onReachBottom事件
在pages.json的需要触底加载的页面进行配置
{
"path": "pages/me/me",
"style": {
"navigationBarTitleText": "我",
//页面刷新是否开启
"enablePullDownRefresh": true,
//在页面距离底部还有200px的时候触发
"onReachBottomDistance":200
}
}
<template>
<view>
<text>我</text>
<view v-for="(item,index) in list" :key="index" class="item">{{item}}</view>
<hr>
<view>
<!-- 加载更多组件 -->
<uni-load-more :status="more"></uni-load-more>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: ['1', '2', '3', '4', '5', '6', '7'],
more:'more'
}
},
// 下拉刷新
onPullDownRefresh() {
console.log('下拉刷新了')
// 做一个下拉延时
setTimeout(() => {
// 刷新后更换list的位置
this.list = ['2', '1', '5', '3', '6', '7', '4']
uni.stopPullDownRefresh(console.log('延迟7秒下拉刷新停止'))
}, 7000)
},
// 触底加载
onReachBottom() {
console.log('触底了')
setTimeout(()=>{
console.log('触底加载数据了')
setTimeout(()=>{
this.list=[...this.list,...['11','12','13','14','15','16']]
this.more='loading'
console.log('隔两秒加载一次数据')
},2000)
})
},
}
</script>