- 微信小程序使用wx:for能够实现多个文本的隐藏和显示吗?
<view class="box1"> <view class="banner"> <swiper indicator-dots indicator-color="rgba(255,255,255,0.5" indicator-active-color="#fff" autoplay="yes" interval="2000" circular="yes"> <swiper-item> <image src="cloud://cloud1-6g987jw4ffa3d6e1.636c-cloud1-6g987jw4ffa3d6e1-1308453736/img/yirihuodong.jpg"/> </swiper-item> <swiper-item> <image src="cloud://cloud1-6g987jw4ffa3d6e1.636c-cloud1-6g987jw4ffa3d6e1-1308453736/img/yirihuodong2.jpg"/> </swiper-item> </swiper> </view> <view class="mengban"> <view class="title">一日游活动表</view> <view class="line"></view> <view class="description"> <text class="flex-text {{ellipsis?'ellipsis':'unellipsis'}}" user-select="true" >{{contentShow}}</text> <image class="ellipsis_text" mode="heightFix" hidden="{{content.length<=maxLength}}" bindtap="ellipsis" src="{{ellipsis?'/images/down.png':'/images/up.png'}}"></image> </view> </view> </view> data: { content: "门票:单人 /双人\n休息房间:1间\n卡丁车:1次 /2次\n彩虹滑道:1次/2次 \n水上项目:1次 /2次\n成人高空:1次/2次\n价格:单人价格:300元\n双人价格:480元\n\n-添加人数按照150元/人-\n\n日程安排:\n1.中午2:00到三清园户外运动公园,安排房间\n2.彩虹滑道\卡丁车\成人高空项目\n3.时间剩余可房间内手游桌游\n4.晚饭时间(可向营地定制农家菜,30元/位,另附)\n5.晚饭后水上项目\n6.项目过后房间冲水洗澡退房\n", // 完整的内容 contentShow: "门票:单人 /双人\n休息房间:1间\n卡丁车:1次 /2次\n彩虹滑道:1次/2次 \n水上项目:1次 /2次\n成人高空:1次/2次\n", // 真实显示的内容 maxLength: 60, // 收起时最大显示文字长度 ellipsis: true, // 是否收缩 }, ellipsis: function () { var ellipsis = !this.data.ellipsis; var contentShow = this.data.content; var maxLength = this.data.maxLength; // 如果内容长度少于10,则不截取;否则当处于收起状态,截取7个文字并加上省略号 contentShow = (contentShow.length > maxLength && ellipsis) ? contentShow.substring(0, maxLength - 3) + "..." : contentShow; this.setData({ contentShow: contentShow, ellipsis: ellipsis }) } [图片][图片] 问:我这里只实现了一个长段文本的隐藏和显示,但是我还有好多个同类型的这种长段文本,想用wx:for实现,想问以下,应该怎么编写呢?主要是js里面的数据渲染的问题,一直没有调出来😅
2021-12-22 - 微信小程序边框内部距离文字的距离可以调吗?
.tags .tag1,.tags .tag2{ position: relative; top: 25%; margin-right: 20rpx; font-size: 26rpx; color: orange; opacity: 0.7; box-sizing: border-box; height: 42rpx; border: 4rpx solid orange; letter-spacing: 2rpx; } [图片] 就比如说我上面这个代码写出来,根据图片可以看出,文字跟边框的距离太紧凑了,想要距离大一点是通过什么属性来设置呢?我记得是有的,我以前写过给忘了。
2021-12-21