更新记录
1.0(2023-08-14) 下载此版本
根据uni-steps 改造
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
插件简绍
实现原理
steps-image 是通过uni-step 改造而成
使用环境
经测试发现大部分浏览器都可以正常使用(微信,QQ,谷歌,火狐,safari)
插件使用
插件已支持 uni_modules 支持组件easycom,以下代码演示的是普通使用
<!-- HTML -->
<UniStepsImage :datas="datas"
:active="datas.length"
:options="options" ></UniStepsImage>
// js
import UniStepsImage from "@/components/stephen-uni-steps-image/uni-steps-image/uni-steps-image.vue"
// 嫌路径长的话可以单独复制出来
export default {
components: {
UniStepsImage
},
data(){
return {
options:{
label:"title", //自定义名称
time:"time",//自定义时间名称
thumb:"thumb",//缩略图
imgUrl:"imgUrl",//预览图
description:'desc' ,//文本描述
timeOptions:{size:18,color:""}, //时间点颜色和大小
titleOptions:{size:14,color:""},//标题颜色和大小
descOptions:{size:14,color:"#ccc"},//描述颜色和大小
},
datas:[
{
thumb:"https://img1.baidu.com/it/u=3698355147,4173481165&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" ,//缩略图
imgUrl:"https://img1.baidu.com/it/u=3698355147,4173481165&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",//图片路径
title:"清风徐来十里香",
time:'2023-09-01 12:12:12',
label:"我是本身title",
desc:"清空万里随风飘"
}
]
}
}
onLoad() {
//模拟数据
for(let i=0;i<10;i++){
this.datas.push(this.datas[0])
}
},
}
相关API
可传属性(Props)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 自定义的标题key | String | false |
time | 自定时间的key | String | environment |
thumb | 显示的缩略图key | String | whole |
imgUrl | 预览图片的高清图key | String | false |
description | 描述的key | String | false |
timeOptions | 时间文字大小和颜色配置 | json | size:14 |
titleOptions | 标题文字大小和颜色配置 | json | size:14 |
descOptions | 描述文字大小和颜色配置 | json | size:14 |
label:"title", //自定义名称 time:"time",//自定义时间名称 thumb:"thumb",//缩略图 imgUrl:"imgUrl",//预览图 description:'desc' ,//文本描述 timeOptions:{size:14,color:""}, //时间点颜色和大小 titleOptions:{size:14,color:""},//标题颜色和大小 descOptions:{size:14,color:"#ccc"},//描述颜色和大小
插槽 (slot)
插槽名称 | 说明 | 默认值 |
---|---|---|
自定义的内容会在图片下方显示 |