今天完成的事情
1.解决了之前小程序点击查看更多、点击收起的bug，先看代码
wxml:
<!-- 视频简介 -->
<view class="video-content">
<view wx:if="{{item.introduction.length<52}}">{{item.introduction}}</view>
<view wx:if="{{item.introduction.length>51 && shortText}}">
<text>{{item.introduction1}}</text>
<text style="color:red;" bindtap="changeIntro">...更多</text>
</view>
<view wx:if="{{item.introduction.length>51 && longText}}">
<text>{{item.introduction}}</text>
<text style="color:red;" bindtap="changeIntro">...收起</text>
</view>
</view>
js:
shortText: true,
longText: false,
//点击查看更多
this.data.dataList.forEach(item => {
if (item.introduction.length > 52) {
item.introduction1 = item.introduction.substr(0, 52);
}
})
//点击更多实现查看或者收起
changeIntro: function () {
this.data.shortText = this.data.shortText == false ? true : false;
this.data.longText = this.data.longText == true ? false : true;
this.setData({
shortText: this.data.shortText,
longText: this.data.longText
})
},
如上第二段js代码，在获取到了所有的后端数据后，把每一条数据遍历，获取每条数据的视频简介introduction，通过字符串截取方法判断字符串长度是否大于52，如果是则取前52个字符生成新的字符串introduction1
如上第一端js代码，html文件内写了三个wx：if语句，根据视频简介的字符串长度以及定义的变量进行选择哪一个应该显示在页面上，点击更多文字以及收起文字会触发changeIntro方法，而这个方法是修改定义变量的布尔值的，这样就实现了点击查看更多、点击收起的功能
今天遇到的问题
实现点击更多、点击收起的功能时，定义的变量不起作用，如下
<!-- 视频简介 -->
<view class="video-content">
<view wx:if="{{item.introduction.length<52}}">{{item.introduction}}</view>
<view wx:if="{{item.introduction.length>51}} && {{shortText}}">
<text>{{item.introduction1}}</text>
<text style="color:red;" bindtap="changeIntro">...更多</text>
</view>
<view wx:if="{{item.introduction.length>51}} && {{longText}}">
<text>{{item.introduction}}</text>
<text style="color:red;" bindtap="changeIntro">...收起</text>
</view>
</view>
解决：如上红色字体，原因是wx：if的使用方法错误，这里的“&”不能这样用，而是要将两个放到一起，如下
<!-- 视频简介 -->
<view class="video-content">
<view wx:if="{{item.introduction.length<52}}">{{item.introduction}}</view>
<view wx:if="{{item.introduction.length>51 && shortText}}">
<text>{{item.introduction1}}</text>
<text style="color:red;" bindtap="changeIntro">...更多</text>
</view>
<view wx:if="{{item.introduction.length>51 && longText}}">
<text>{{item.introduction}}</text>
<text style="color:red;" bindtap="changeIntro">...收起</text>
</view>
</view>
今天的收获
解决了之前的两个bug
明天的计划
完成小程序的点赞收藏功能
返回列表
评论