微信小程序轮问题集合

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()
}
           

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