收藏
回答

小程序如何动态插入wxml,并实时得到容器高度?

我需要在page中添加一个view(类似js的document.createElement("div");),然后在这个容器中再一个个的添加子容器,如(document.createElement("li");),当然view也可以,然后添加子容器后,再检测一下外容器的高度

小程序中如何实现呢?


回答关注问题邀请回答
收藏

1 个回答

  • 一般般
    一般般
    01-27

    在微信小程序中,动态插入WXML内容通常通过setData方法更新页面数据,并结合模板(template)或wx:for等循环结构来实现。获取容器高度则需要监听对应的布局变化事件,如onLoad、onReady以及bindload等。

    以下是一个简单的示例,假设我们有一个可动态插入内容的列表容器,并且需要实时得到这个容器的高度:

    1.在wxml文件中定义一个可以动态填充内容的view容器,并设置一个唯一的id便于获取其高度:

    <!-- index.wxml -->
    <view id="dynamicContent">
      <block wx:for="{{items}}" wx:key="*this">
        <!-- 动态插入的内容,例如: -->
        <view>这是动态插入的第{{index + 1}}项内容</view>
      </block>
    </view>
    
    


    2.在对应的js文件中,首先获取屏幕和元素的高度,并在数据加载完成时或视图渲染完成后进行设置和获取高度:

    // index.js
    Page({
      data: {
        items: [], // 动态内容数组
        containerHeight: 0 // 容器初始高度设为0
      },
    
    
      onLoad: function() {
        this.initData();
      },
    
    
      initData: function() {
        // 假设从某个地方获取动态内容并填充到items数组
        var dynamicItems = ...; // 获取动态内容数据
        this.setData({
          items: dynamicItems
        });
    
    
        // 更新数据后,异步获取容器高度
        setTimeout(() => {
          this.getContainerHeight();
        }, 300); // 注意,这里使用setTimeout是因为setData是异步操作,确保渲染完成后再获取高度
      },
    
    
      getContainerHeight: function() {
        const query = wx.createSelectorQuery().in(this);
        query.select('#dynamicContent').boundingClientRect();
        query.exec((res) => {
          if (res && res[0]) {
            this.setData({
              containerHeight: res[0].height
            });
            console.log('容器实际高度:', res[0].height);
          }
        });
      }
    })
    
    

    上述代码演示了如何在初始化数据时动态添加内容,并在内容渲染完成后获取容器的实际高度。注意,由于DOM更新是异步的,在获取高度时可能需要等待一定时间以确保计算结果准确无误

    01-27
    有用
    回复 2
    • Bob pang
      Bob pang
      01-27
      非常感谢回复,其实,我是想实现这样的效果,就是外容器达到一定高度后,新建一个外容器,继续把子容器往里塞,外容器的数量取决于子容器
      01-27
      回复
    • 一般般
      一般般
      01-29回复Bob pang
      异曲同工,getContainerHeight获取了高度,你就根据你内部的item高度加上padding和margin自己算一下写进去判断就可以了,然后在view里加if 每到第几个下一页
      01-29
      回复
登录 后发表内容