小程序swiper（tab）高度自适应

swiper高度问题一直困扰我。今天终于有时间来解决一下。因为他的高度不能固定死，写死其他数据展示不完全，不写或者100%，auto都不行。翻了一堆资料也查了很多，最后总结一下。
1.很多人都说用一种方法。就是高度*数量，也就是所说的获取数据数组长度，根据数据长度来动态改变每页的长度，因为字号啊什么的在各个手机显示不一定都相同，总感觉不是解决问题的最佳方法。
2.使用Swiper+scroll-view
先设置swiper高度

<swiper style="height: {{clientHeight?clientHeight+'px':'auto'}}" class='videoSwiper'  current="{{currentTab}}"  duration="200" bindchange="swiperchange"></swiper>

在swiper-item中嵌套一个scroll-view

<swiper-item ><scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot"></scroll-view>
</swiper-item >

在js中获取设备可视窗口高度（我是写在onload里的）

onLoad:function(){var that = thiswx.getSystemInfo({success: function (res) {that.setData({clientHeight: res.windowHeight});}})}

切换的js

swiperchange: function (e) {var that = thisconsole.log(e.detail.current)that.setData({'currentTab': e.detail.current})},

小程序swiper（tab）高度自适应相关推荐

swiper高度自适应_小程序 swiper 图片高度自适应+预览图片
一.概述: 在开发小程序的项目中,经常会用到swiper这个轮播组件,但是使用的时候会有一个问题,swiper系统会默认一个高度而且是px为单位的,如下: swiper { display:block ...
微信小程序 - 设置图片高度自适应（宽度固定）
我们要放入多张一样宽度不一样高度的图片的时候,我们不能同时都设置固定的高度,这样会使得一些图片被挤压或者有些会出现空白的现象,这些都不能满足我们的需求,所以我来说一下如何实现图片高度自适应. 我们 ...
html微信图片自适应,微信小程序实现图片高度自适应
1. swiper轮播海报通过wx.getSystemInfo接口获取屏幕高度,高度依据图片宽高等比缩放运行于app.js,全局保存 // 设备信息 wx.getSystemInfo({ succe ...
微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
微信小程序swiper高度自适应方法
小程序swiper高度自适应 data: {//图片hdimg: [],//是否采用衔接滑动circular: true,//是否显示画板指示点indicatorDots: false,//选中点的颜 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...
微信小程序轮播图片自适应
微信小程序轮播图片自适应 //xml代码 <view class="rotation"><swiper class="home-swiper" ...
php展示微信图片尺寸,微信小程序实现image图片自适应宽度
本文主要和大家分享微信小程序实现image图片自适应宽度,希望能帮助到大家,首先我们先来了解一下image组件. 一.了解image组件由于image有默认的固定的宽度和高度,这样我们在做图片自适应 ...
钉钉小程序实现Tab选项卡
引言:小程序开发中,有很多封装好的控件,但是常用的tab选项卡没有,所以网上查了资料,可以根据view+swiper来实现,于是自己跟着也写了一个,由于自己刚接触钉钉小程序,网上资料还是蛮少的,所以这 ...

小程序swiper（tab）高度自适应

小程序swiper（tab）高度自适应相关推荐

最新文章

热门文章