小程序swiper组件默认高度150px，并且如果子元素过高，swiper不会自适应高度
律师小程序开发解决方案一： (总体来说不够完美，适合满屏滑动)
如果不是满屏的状态，用scroll-view IOS滑动兼容性不好，在IOS会有无法滑动的情况
style="height:{{height}}px"
bindchange="change"
current-item-id="{{docid}}"
duration="100"
>
wx:for="{{title}}"
wx:key="index"
item-id="{{item.id}}"
>
data-id="{{item.id}}"
style='height:100%;'
scroll-y
bindscrolltolower="scrolltolower"
data-left="51"
scroll-top="{{top}}"
bindscroll="scroll"
>
加载中...
适应场景：
scroll-view
适合这种满屏滑动的，嵌套
注意：需要有条件，写固定的高，纵向滑动scroll-y
横向滑动 scroll-x white-space:nowrap;
解决方案二： (适应子元素高度也不一致)
效果图是这样的：然后在上滑过程中，导航栏还需要吸顶，然后滑动下方tab栏的内容
其实如果不是基于小程序，我们可以很直接用swiper插件，操作起来简直方便，小程序由于 swiper 高的限制，真是走了不少弯路，如果下面的列表高度一样，我们便可以算出一个的高度，然后乘以个数即可，但是这样只能求出每一个个数
index .wxml
这里面便是一个一个不同高度的列表
正在加载
左右滑动，查看更多
index.js
// 获取wxml的节点信息
function get_wxml(className, callback) {
wx.createSelectorQuery().selectAll(className).boundingClientRect(callback).exec()
}
onReady: function() {
let column_all = that.data.column_list[that.data.current].viewLessonList, // 这个是基于java端返回的tab栏的接口，大致样式如上图，也就是每个列表，
channel_id = that.data.column_list[that.data.current].channelId // 我们这个就是求出目前的channelId，好区分不同的类名
that.setData({
swiper_length: column_all.length // 算出当前tab栏有多少个列表
})
get_wxml(`.column-list${channel_id}`, (rects) => {
let sum_heigth = 0
for (let i = 0; i < that.data.swiper_length; i++) {
sum_heigth += rects[i].height
}
that.setData({
swiper_height: sum_heigth
})
// 就是循环相加每个列表的高度，然后赋值给swiper_height,便可以求出当前tab栏的高度，赋值给swiper 便可以swiper高度自适应
})
}
刑事律师网站模板、响应式深灰色大气律师网站模板
￥1000.00
律师网站模板、律师事务所网站模板【响应式，蓝色简洁大气风格】
￥1000.00
简洁大气的响应式律师事务所网站设计模板，兼容移动端
￥50.00
成都律品科技有限公司专注律师互联网营销技术服务，创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年，2018年公司正式成立，不断探索律师行业服务需求，致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。
152-0832-9147
105991110
微信咨询