首页 > 编程学习 > 微信小程序轮问题集合

微信小程序轮问题集合

发布时间:2022/10/1 5:28:17

1. 内置组件

1. swiper

1. swiper 图片自适应容器高度问题

微信小程序中, 当我们使用swiper 组件中的轮播图设置图片的属性为 mode="widthFix" 时, 常常会发现图片高度和 swiper 容器的高度不一致导致 indicator-dots 的位置不准确

因为轮播图的高度默认为 150px, 会造成下面的一部分没有显示

错误实例

在这里插入图片描述

自适应高度的最后结果

在这里插入图片描述
解决办法, 动态获取高度, 设置容器的高度

 <swiper class="banner"
            style="height: {{ bannerHeight }}px;"
            circular autoplay indicator-dots>
        <block wx:for="{{ banners }}" wx:key="targetId">
            <swiper-item class="item">
                <image src="{{ item.imageUrl }}"
                       mode="widthFix" class="banner-image"
                       bind:load="onBannerLoad"></image>
            </swiper-item>
        </block>
    </swiper>

上面我绑定了组件库中组建自带的方法 bind:load="onBannerLoad" ,当照片加载完毕后触发

利用 微信小程序内置的 API, 动态获取高度, 解决自适应问题

wx.createSelectorQuery() 返回一个 SelectorQuery 对象实例。

NodesRef SelectorQuery.select(string selector)
在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。

SelectorQuery NodesRef.boundingClientRect(NodesRef.boundingClientRectCallback callback)
添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

onBannerLoad() {
    // 获取 image 组件高度
    wx.createSelectorQuery().select('.banner-image').boundingClientRect((rect) => {
        console.log(rect)
        this.setData({
            bannerHeight: rect.height
        })
    }).exec()
}

最后展示一下调用方法返回的对象结果

在这里插入图片描述

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号