示例代码地址 https://github.com/s568774056/swipe.git
对于整页都是swiper的情况下。例如下面这张图：
则可以使用如下css
height: 100vh !important;
swiper,swiper-item{ height: calc(100vh - 75rpx) !important; } |
对于swiper占据部分高度的情况下。
使用如下代码
原理为在swiper-item的最上面和最下面插入空view，并利用wx api获取两个之间的高度差，然后设置给swiper。
细节方面需要自己调整下。为什么小程序不把这个组件做好呢？还得自己计算- -！
<swiper class='hide' bindanimationfinish="swiperChange" style="height:{{swiper_height}};" current="{{isIndex}}"> <swiper-item wx:for="{{roomList}}" wx:for-item='room' wx:for-index="index"> <view id="start{{index}}" class='start-view'></view> <block wx:for="{{imgUrls}}" wx:for-item='path' wx:for-index="img-index"> <image mode="aspectFill" src="{{path}}" /> </block> <view id="end{{index}}" class='start-view'></view> </swiper-item> </swiper> |
swiper { margin-top: 45rpx; } |
Page({ data: { roomList: ['Room1', 'Room2', 'Room3'], imgUrls: [ 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' ], swiper_height: 0, isIndex:0 }, onLoad: function () { this.autoHeight(); }, changeNavBar: function (e) { this.setData({ isIndex: e.detail }); }, swiperChange: function (e) { this.setData({ isIndex: e.detail.current }); this.autoHeight(); }, autoHeight() { let { isIndex } = this.data; wx.createSelectorQuery() .select('#end' + isIndex).boundingClientRect() .select('#start' + isIndex).boundingClientRect().exec(rect => { let _space = rect[0].top - rect[1].top; _space = _space + 'px'; this.setData({ swiper_height: _space }); }) } }) |
参考文章https://developers.weixin.qq.com/community/develop/doc/00008aaf4a473056d1c69a8b253c04
https://developers.weixin.qq.com/s/ylShYBma7f5J 官方自带 的一个小例子
。。。我是用swiper做左右滑动加分页的，为了不增加示例代码的复杂度，没有放分页和navbar的控制代码。默认的swiper高度是150px，超出150px的元素会被遮挡，不满足需求的。如果用scroll的话同样需要给scroll指定高度。
貌似有长度限制，我试了下swiper高度大概到29260px就涨不了了。。
谢谢大哥的案例，找了好久才看到一样的问题。其他的方案解决不了这种页面有其他内容的。而且使用swiper嵌套scroll-view又会造成两个滚动条，更不好解决了。阿里嘎多
我一个项目里面遇到两个地方这种问题，一个地方通过给每个子item一个唯一id获取子元素高度，动态赋值高度，还有个地方更惨，子元素是动态的，动态的就算了，还没有高度，也是需要自己去赋值高度的，就子元素是rich-text，这可怎么玩 啊？
请问一下博主，我也是按照您的方法写的，但是获取到的高度不是实际高度只是页面的高度，是因为我swiper-item里面是用wx：for进行的循环吗，可是如果我使用定时器也是不管用的
以下要点我全部都实现，麻烦博主帮忙看一眼，公司催的急网上的办法都不好用。。
page和height：100%
在swiper-item的上下分别设置一个view给他一个id，在onload和changeswiper的时候进行高度的计算。。
直接用vh不就好了？？？？
vh和height100%不一样吗？设置这个无效果的。
vh 就是将你的屏幕高度分成100份！
100%这个属性值可以理解为一个计算属性！它是需要有一个基准值！而这个基准值就是其父级元素的高度值！
也可以这么理解：height 100依赖父元素，100vh直接视口高度
你好，能帮我看看这个问题吗，谢谢
https://developers.weixin.qq.com/community/develop/doc/000ac65d3900308f218883b5e5bc00
用scroll-view就不用计算了吧,没试过,仅供参考
因为不想用scroll-view呢
嗯,那就只能计算高度了,我用swiper做过左右翻页得小程序,用楼主得方法是最简单得拉,谢谢你得分享
不客气哦