小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度

解决方案一: (总体来说不够完美,适合满屏滑动)

如果不是满屏的状态,用scroll-view IOS滑动兼容性不好,在IOS会有无法滑动的情况

<swiper class="content"
style="height:{{height}}px"
bindchange="change"
current-item-id="{{docid}}"
duration="100"
>
<swiper-item data-key="{{item.id}}"
wx:for="{{title}}"
wx:key="index"
item-id="{{item.id}}"
>
<scroll-view
data-id="{{item.id}}"
style='height:100%;'
scroll-y
bindscrolltolower="scrolltolower"
data-left="51"
scroll-top="{{top}}"
bindscroll="scroll"
>
<!--单条新闻start -->
<navigator url="/pages/detail/detail?id={{item.docid}}" class="item" wx:for="{{item.id==docid?news:''}}" wx:key="index"> </navigator>
<!--单条新闻end -->
<view class='loading'>加载中...</view>
</scroll-view>
</swiper-item>
</swiper>

适应场景:

适合这种满屏滑动的,嵌套 **scroll-view **

注意: 需要有条件,写固定的高,纵向滑动scroll-y

​ 横向滑动 scroll-x white-space:nowrap;

解决方案二: (适应子元素高度也不一致)

然后在上滑过程中,导航栏还需要吸顶,然后滑动下方tab栏的内容

其实如果不是基于小程序,我们可以很直接用swiper插件,操作起来简直方便,小程序由于 swiper 高的限制,真是走了不少弯路,如果下面的列表高度一样,我们便可以算出一个的高度,然后乘以个数即可,但是这样只能求出每一个个数

  • index .wxml
<swiper current="{{current}}" bindchange="change" duration="300" style="height:{{swiper_height + 80}}px;min-height:50%vh;">
<swiper-item class="swiper-item" wx:for="{{channel_list}}" wx:key="{{item.id}}">
<!-- navigator 的类名很重要,虽然一个循环用统一样式,但是我们基于不同的tab 取了不用的类名 ,因为小程序无法操作DOM元素,虽然封装的API 可以获取,但是只能获取第一个和所有,我们每个tab的内容个数不一样,所以需要基于每个tab栏求,item.channelId 是图2标注吸顶效果的channelId, -->
<navigator class="column-list column-list{{item.channelId}}" url="" wx:for="{{item.viewLessonList}}" wx:for-item="lesson" wx:key="{{index}}" wx:key-item="lesson-item">
这里面便是一个一个不同高度的列表
</navigator>
<!-- 这下面就是weui的一个加载样式,基于分页加载做的不同样式 -->
<view class="weui-loadmore" hidden="{{is_loadmore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
<text class="weui-loadmore__tips">左右滑动,查看更多</text>
</view>
</swiper-item>
</swiper>

  • 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高度自适应
})
}

微信小程序swiper高度自适应,swiper的子元素高度不固定的更多相关文章

  1. 小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

    小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

  2. 【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    wx:if 与 hidden 都可以控制微信小程序中元素的显示与否. 区别: wx:if 是遇 true 显示,hidden 是遇 false 显示. wx:if 在隐藏的时候不渲染,而 hidden ...

  3. 转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别

    条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里 ...

  4. 如何找回微信小程序源码?2020年微信小程序反编译最新教程 小宇子李

    前言:在网上看了找回微信小程序源码很多教程,都没法正常使用.微信版本升级后,会遇到各种报错, 以及无法获取到wxss的问题.查阅各种资料,最终解决,于是贴上完整的微信小程序反编译方案与教程. 本文章仅 ...

  5. 微信小程序分享朋友圈 长海报 canvas 动态高度计算

    业务场景 在微信中 小程序无法分享到朋友圈,目前大部分的解决方案都是,canvas动态绘制 生成图片后,保存到用户相册,用户进行分享照片到朋友圈,朋友圈打开图片后识别二维码进入小程序,达到分享目的 g ...

  6. 微信小程序框架分析小练手(三)——仿香哈菜谱小程序制作

    香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...

  7. C#开发微信小程序(四)

    导航:C#开发微信小程序系列 关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中 ...

  8. 微信小程序5 - 数据驱动界面

    微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...

  9. 微信小程序和支付宝小程序富文本使用

    微信小程序使用的是 1. wxml 页面元素的最简单使用 <rich-text nodes="{{这是你的数据}}"></rich-text>   2. j ...

  10. 微信小程序与内嵌webview之间来回跳转的几点总结,以及二维码的使用

    截止到发稿小程序支持的功能,后续如果小程序更新在完善文稿. 1. 小程序可以内嵌组件跳转到h5页面,前提是在小程序后台配置相应的业务域名.新打开的h5页面会替代小程序组件内的其它组件,即为h5不能与小 ...

随机推荐

  1. tweenMax学习笔记

    tweenMax是一款缓动插件,能实现很多牛逼的效果,在网上看了些demo,确实很吊,虽说很多用CSS3也能做出来,但是技多不压身,学之. 网上的demo还是很多的,但是资料不多,唯一能够让我有思绪的 ...

  2. sql 跨服务器查询数据

    方法一:用OPENDATASOURCE [SQL SERVER] 跨服务器查询 --1 打开 reconfigure reconfigure SELECT * FROM OPENDATASOURCE( ...

  3. Python输出9*9 乘法表

    for i in range(1,10): for j in range(1,i+1): print(str(j) + str("*") + str(i)+"=" ...

  4. Linux系统基本命令

    要区分大小写 uname 显示版本信息(同win2K的 ver) dir 显示当前目录文件 ls -al 显示包括隐藏文件(同win2K的 dir) pwd 查询当前所在的目录位置 cd .. 回到上 ...

  5. update-rc.d使用

    在Linux系统下,一个Services的启动.停止以及重启通常是通过/etc/init.d目录下的脚本来控制的.然而,在启动或改变运行级别时,是在/etc/rcX.d中来搜索脚本.其中X是运行级别的 ...

  6. 秘钥登录服务器执行shell脚本

    做自动化的时候,有时候避免不了要和服务器有互动,刚巧碰上一个项目,需要执行命令才能完成本次测试. 昨天遇到的是秘钥形式的,只有秘钥和用户名,百度找了许久也没有思路,(能账号密码登录服务器的还简单些), ...

  7. opencv SVM多分类 人脸识别

    上一篇介绍了OPENCV中SVM的简单使用,以及自带的一个二分类问题. 例子中的标签是程序手动写的,输入也是手动加的二维坐标点. 对于复杂问题就必须使用数据集中的图片进行训练,标签使用TXT文件或程序 ...

  8. Java编程的逻辑 (32) - 剖析日期和时间

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  9. Git(二)使用git管理文件版本(TortoiseGit )

    一.创建版本库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都 ...

  10. 【转】java取整和java四舍五入方法

    java取整和java四舍五入方法 import java.math.BigDecimal; import java.text.DecimalFormat; public class TestGetI ...