更新记录

1.0.0(2024-05-29) 下载此版本

初始化


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

注意事项

注意事项 本组件使用了uni-icons, 请在使用前先引用uni-icons组件。本组件使用了iconfont图标, 如若更换图标,请自行上传iconfont.css进行更换。

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

基本用法

template 中使用组件

<spring-image-text :dataList="list"></spring-image-text>

图片尺寸1:1

<spring-image-text :dataList="list" imageShape="square"></spring-image-text>

图片位置更换

<spring-image-text :dataList="list" imagePosition="right"></spring-image-text>

只显示标题

<spring-image-text :dataList="list" :showDesc="false"></spring-image-text>

export default {
    data() {
        return {
            list: [{
                    coverImage: 'https://docreview.oss-cn-hangzhou.aliyuncs.com/doc-review/66417e0c60b26b8d682a1bcd.png',
                    title: '云南栖花岭',
                    desc: '云南栖花岭',
                    createTime: '2024-05-01 10:00'
                },
                {
                    coverImage: 'https://docreview.oss-cn-hangzhou.aliyuncs.com/doc-review/66417e0c60b26b8d682a1bcd.png',
                    title: '天然石',
                    desc: '我是个小小的石头',
                    createTime: '2024-05-01 10:00'
                },
                {
                    coverImage: 'https://tennis-1253685553.cos.ap-shanghai.myqcloud.com/tennis/662da982d5dee7df76a12b49.png',
                    title: '活动风景',
                    desc: '这个关于风景的摄影展',
                    createTime: '2024-05-01 10:00'
                }
            ]
        }
    },
    onReachBottom() {
        console.log('到底了!');
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: '只显示标题'
        })
    },
    methods: {

    }
}

API

Props

属性名 类型 默认值 说明
dataList Array - 数据,期望数据格式columns: [{coverImage: '', title:'', desc: '', createTime: ''}...]
showDesc Boolean true 是否显示描述
showTimeIcon Boolean false 是否显示时间图标
radius String 16rpx 外框圆角
imageRadius String 16rpx 外框圆角
titleFontWeight Number 700 标题字体粗细
bgColor String #D4E5EF 背景色
color String #354E6B 文字颜色
descColor String - 描述文字颜色,如不填,则与color保持一致
timeColor String - 时间文字和图标颜色,如不填,则与color保持一致
imagePosition String left 图片位置
imageShape String - 图片形状,可填项 square

Events

事件名 说明 返回值
tapItem 点击事件 返回点击的对象

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问