这篇文章主要介绍了微信小程序怎么实现text文本的展开与收起 的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现text文本的展开与收起 文章都会有所收获,下面我们一起来看看吧。先看看布局文件,关
这篇文章主要介绍了微信小程序怎么实现text文本的展开与收起 的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现text文本的展开与收起 文章都会有所收获,下面我们一起来看看吧。
先看看布局文件,关键在与{{ellipsis?'ellipsis':'unellipsis'}},样式根据js中的ellipsis改变。
<view class='bg-white marginTop10 vertical'><text class='pay-hint-tille'>挂号支付须知</text><text class="pay-hint-content {{ellipsis?'ellipsis':'unellipsis'}}" >1.支付成功后,将会推送排队号;就诊当日可直接前往诊室等待叫号就诊,无需再现场缴费、排队。\n2. 已完成支付挂号费用的用户,如在就诊前一日取消预约订单,成功申请取消订单后,正常情况下系统将会在7个工作日内自动退费至用户支付账号内。\n3. 订单在正常状态下(非系统故障、非医生临时停诊)被爽约,由于占用了医院号源,此类订单不予以退费。</text><view class='bg-white-ellipsis' bindtap='ellipsis'><image class='img-ellipsis' src="{{ellipsis?'../images/ellipsis.png':'../images/unellipsis.png'}}"></image></view></view>
接下来看下CSS,其他的css都是常规配置,不需要看, 我们看下pay-hint-content及后面的ellipsis与unellipsis:
.pay-hint-content{margin-left: 5%;margin-right: 5%;margin-top: 10px;font-size: 13px;color: #888;display: -WEBkit-box;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow:hidden; // 通过以上四行实现收缩功能}.ellipsis{-webkit-line-clamp:3; // 最多显示3行opacity: 0.75 // 透明度75%}.unellipsis{-webkit-line-clamp:0; // 全部显示opacity: 1 // 不透明}
这里需要注意的有overflow:hidden
我们再看看js:
Page({data: {ellipsis: true, // 文字是否收起,默认收起},ellipsis: function () {var value = !this.data.ellipsis;this.setData({ellipsis: value})},
关于“微信小程序怎么实现text文本的展开与收起 ”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“微信小程序怎么实现text文本的展开与收起 ”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。
--结束END--
本文标题: 微信小程序怎么实现text文本的展开与收起
本文链接: https://www.lsjlt.com/news/308304.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0