更新记录
1.0.3(2024-11-13)
下载此版本
解决如果内容高度不需要展开的话,就使用自适应高度
1.0.2(2024-11-12)
下载此版本
图标新增
1.0.1(2024-11-12)
下载此版本
图标显示问题
查看更多
平台兼容性
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} |