更新记录

1.0.3(2024-11-13) 下载此版本

解决如果内容高度不需要展开的话,就使用自适应高度

1.0.2(2024-11-12) 下载此版本

图标新增

1.0.1(2024-11-12) 下载此版本

图标显示问题

查看更多

平台兼容性

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

使用示例-普通用法

<template>
  <sh-read-more>
    <view style="padding: 30rpx;">
      浔阳江头夜送客,枫叶荻花秋瑟瑟。
      主人下马客在船,举酒欲饮无管弦。
      醉不成欢惨将别,别时茫茫江浸月。
      忽闻水上琵琶声,主人忘归客不发。
      寻声暗问弹者谁,琵琶声停欲语迟。
      移船相近邀相见,添酒回灯重开宴。
      千呼万唤始出来,犹抱琵琶半遮面。
    </view>
  </sh-read-more>
</template>

使用示例-异步回调

<template>
    <sh-read-more :asyncLoad="() => getDetailApi('id')">
        <view style="padding: 30rpx;">
            浔阳江头夜送客,枫叶荻花秋瑟瑟
            主人下马客在船,举酒欲饮无管弦。
            醉不成欢惨将别,别时茫茫江浸月。
            忽闻水上琵琶声,主人忘归客不发。
            寻声暗问弹者谁,琵琶声停欲语迟。
            移船相近邀相见,添酒回灯重开宴。
            千呼万唤始出来,犹抱琵琶半遮面。
            {{ text }}
        </view>
    </sh-read-more>
</template>
<script>
export default {
  data() {
        return {
            text: ''
        }
    },
    methods: {
        getDetailApi(id){
            // 模拟向后端请求
            console.log('拿到的参数', id)
            return new Promise(resolve => {
                setTimeout(() => {
                    this.text = `
                        转轴拨弦三两声,未成曲调先有情。
                        弦弦掩抑声声思,似诉平生不得志。
                        低眉信手续续弹,说尽心中无限事。
                        轻拢慢捻抹复挑,初为《霓裳》后《六幺》
                        大弦嘈嘈如急雨,小弦切切如私语。
                        嘈嘈切切错杂弹,大珠小珠落玉盘。
                        间关莺语花底滑,幽咽泉流冰下难。
                        冰泉冷涩弦凝绝,凝绝不通声暂歇。
                        别有幽愁暗恨生,此时无声胜有声。
                        银瓶乍破水浆迸,铁骑突出刀枪鸣。
                        曲终收拨当心画,四弦一声如裂帛。
                        东船西舫悄无言,唯见江心秋月白。
                    `
                    resolve()
                }, 2000)
            })
        }
    }
}
</script>

属性

属性 类型 默认值 说明
height Number, String 120 单位 px
toggle Boolean true 是否可以展开关闭互相切换
closeText String 收起
openText String 加载更多
animate Boolean true 是否开启动画
duration String 0.1s 动画执行时间
blurHeight Number, String 50 展开收起背景的模糊高度
openIcon String 底部展开的图标
closeIcon String 底部关闭的图标
asyncLoad Function 异步懒加载数据 具体请查看使用示例

插槽 Slot

插槽名 说明
default 用户自定义内容
suffix 自定义尾部加载样式, 参数为{ text, expand}

隐私、权限声明

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

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

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

许可协议

MIT协议

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