微信小程序.swiper高度问题.吐槽（不是代码.

80 阅读 0 评论 53 点赞

我是靠谱客的博主魁梧小蚂蚁，这篇文章主要介绍微信小程序.swiper高度问题.吐槽（不是代码.，现在分享给大家，希望可以做个参考。

吐槽（不是

…蒜了.第一次发帖子…我果然还是好懒…(其实吐槽了很多…

代码.

let 想法 = 给swiper加上height的css样式，写一个方法通过一个参数让高度动态化，然后获取子组件标签元素的height，在子组件调用父组件的方法并把高度给父组件改变父组件的高度；

// …没了.嗯！上代码.

子组件

js.

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	// 组件名：require_information
methods: {
// 组件的高度 (父级swiper的高度
swiperHeight(_this) {
// 获取整个子组件高度
let quert = wx.createSelectorQuery()
quert.select('.require_infor').boundingClientRect(res => {
// 调用父级的方法把自己的height传给他爹地
_this.triggerEvent('swiperHeight', res.height);
}).exec()
},
...
}，
lifetimes: {
attached() {
// emmmm...do you know?
this.__proto__.swiperHeight(this)
}
}

父组件

js.

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

data: {
...
// 详情页面高度
swiperHeight: '',
...
},
// swiper height
swiperHeight(e) {
this.setData({ swiperHeight: e.detail })
},
...

h5.

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- css样式给高度赋值 -->
<swiper class="tab-box" style="{{swiperHeight && 'height: ' + swiperHeight + 'px'}}" current="{{currentTab}}" duration="300" bindchange="switchTab">
<swiper-item class="tab-content">
<block wx:if="{{!currentTab}}">
<view class="require_infor">
<!-- 绑定事件 -->
<require_information bind:swiperHeight="swiperHeight" />
</view>
</block>
</swiper-item>
...
</swiper>