小程序js通过判断DOM元素节点位置来自动显示“更多”按钮

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;
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值