Sham最近因为在做一个食堂订餐功能，因为订单中内容比较多，又不想初始状态全部展示，希望类似文字过长显示省略号那样，在最后显示一个“more”按钮。

实现方法和代码如下，记录备忘

JS部分

data: {showmorebtn:{}//这里初始化，用户后面往这个对象中添加对应id的判断用数据},
//主要用于循环并赋值checkheight(that){var that = this;var items = that.data.mealorders;//获取mealorder数据数组，循环执行是否超高并显示more按钮for(var i=0; i<items.length;i++){that.checkoverflow(that,i);}},//超高时显示more按钮checkoverflow(that,id){var query = wx.createSelectorQuery();//创建节点查询器//获取父对象id的位置信息，生成后会是在res数组的第一个query.select('#f'+id).boundingClientRect();//获取子对象id的位置信息，res数组第二个数据query.select('#c'+id).boundingClientRect();//如果上面再继续加，则会依次为res数组的第三……个数据//生成位置信息数组query.exec(function(res) {//res就是 所有标签为对应id的元素的信息 的数组//console.log(res);//这里的showmorebtn在js的初始data里设置 showmorebtn :{}var showmorebtn = that.data.showmorebtn;if(res[1].height > res[0].height+10){//当子对象高度超过父对象高度时，表示内容太多了，需要显示more按钮，渲染数据用于前端判断showmorebtn[id] = true;that.setData({showmorebtn:showmorebtn})}})},

wxml部分

<!--这里的用index+1是因为发现直接用index的话，如果index为0时，会被判断为false-->
<view class="details {{showdetail == index+1 ? '' : 'h55'}}" id="f{{index}}"><view id="c{{index}}"><view class="foods" wx:for="{{item.orderdetail}}" wx:key="index" wx:for-item="foods">{{index}}:{{foods.number}}份</view></view></view><view class="showdetail white" id="{{index+1}}" bindtap="showdetail" wx:if="{{showmorebtn[index]}}"><view class="bgblue center"><text>more</text></view></view>

最后是WXSS部分，其他没什么，就一个h55，其他的样式不影响

.h55{height:55rpx;overflow: hidden;transition: all 0.4s ease-out 0s;-webkit-transition: all .4s ease-out;-moz-transition: all .4s ease-out;
}

一个在前往码农道路上走走停停的行政文员