小程序文章内容展开收起

╰+攻爆jí腚メ 2023-06-17 07:58 6阅读 0赞

**动态改变文章内容（多篇或单片）**

处理方式：通过小程序中SelectorQuery()选择器方法获取文章内容高度，通过默认收起状态最大高度判断是否显示展开按钮

如果超出默认高度对改字段添加字段控制class的添加与删除 从而控制文章内容的展开与收起

例子：

swan：

<view style="opacity:{
       { zero }}" class="hybd_text {
       { clickData.articleactive == 2?'articleactive':''}}">{
       { clickData.introduce }}</view>
    
    <view class="showmorecontent" bindtap="moreintroduce" s-if="{
       { clickData.zkshow }}">展开全部内容</view>

js：

//小程序onReady()监听页面初次渲染完成的生命周期函数
    onReady: function () {
        this.indorc();
    }
    //通过setInterval不停的调用方法从而获取动态生成内容获取到元素高度，获取到后停止执行、
    //如果使用定时器在网络加载过慢情况下获取不到文章内容从而获取不到元素高度
    //添加res[0] != null判断否则控制台报错
    //默认高度200
    //超出后在内容字段添加articleactive和zkshow字段分别控制class添加删除和展开按钮显示隐藏
    //防止元素生成后会闪一下 在内容初始化时添加动态样式内容opacaity = 0
    indorc: function () {
            var that = this;
            var myVar = setInterval(function () {
                const selectorQuery = swan.createSelectorQuery();
                selectorQuery.select('.hybd_text').boundingClientRect();
                selectorQuery.exec(res => {
                    if(res[0] != null){
                        var height = res[0].height;
                        if (height > 200) {
                            that.data.clickData.articleactive = 2;
                            that.data.clickData.zkshow = true;
                        }
                        that.setData({
                            clickData: that.data.clickData,   //添加字段后重新渲染
                            zero: 1        //显示出内容
                        });
                        clearInterval(myVar);
                    }
                })
            }, 200);
        }
    }