原文

最近在项目遇到swiper高度不能自适应,导致swiper-item 里面的内容过多时只能显示一部分,最终解决方案:
<swiper>
<swiper-item>
<scroll-view :scroll-y="true" :style="{height: clientHeight?clientHeight+'px':'auto'}">
内容放在这
</scroll-view>
</swiper-item>
</swiper>
swiper-item {
overflow: scroll;
}

最后在后台动态获得屏幕可视区域高度clientHeight即可

onLoad: function () {
let that = this
//uni-app是uni.getSystemInfo,微信小程序wx.getSystemInfo
uni.getSystemInfo({
success: function (res) {
//uni-app
that.clientHeight=res.windowHeight-177
//微信小程序
//that.setData({
// clientHeight: res.windowHeight-177
//});
}
})
}

uni-app、小程序之swiper-item内容过多显示不全的解决方案的更多相关文章

  1. 小程序swiper-item内容过多显示不全的解决方案

    最近在项目遇到swiper高度不能自适应,导致swiper-item 里面的内容过多时只能显示一部分,最终解决方案:<swiper current="{{currentTab}}&qu ...

  2. 微信小程序1rpx border ios真机显示不全问题

    无意间测试发现,把border的颜色的透明度颜色改成0.99就可以了.1就不行. 边框显示不全的写法: border:1rpx solid rgba(244,84,80,1); 将边框代码的透明度改成 ...

  3. 关于如何解决PHPCMS V9内容搜索显示不全问题解决方案

    站长朋友们都晓得只要是开源的PHP程序都会有漏洞存在.如果想完美的建站就需要自己去研究打补丁了.最近很多站长联系小编咨询用phpcms建站当在首页搜索内容的时候有的居然搜索不到.小编感到很是奇怪于是就 ...

  4. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  5. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解

    Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解 说明:Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解,加密算法,是现在每个软件项目里必须用到的内容. 广泛应用在包括 ...

  7. uni与小程序,vue的区别

    标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...

  8. 微信小程序获取输入框(input)内容

    微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...

  9. Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)

    Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...

随机推荐

  1. Boss直聘App上“天使投资、VC、PE” 与“A轮、B轮、C轮融资”的关系

    我们经常看到朋友圈里某某公司获得了某轮融资,所谓的A轮B轮究竟是个什么概念呢?今天就跟小伙伴们分享一下A.B.C.D轮融资与天使投资.VC.PE的关系. 天使投资(AI):天使投资所投的是一些非常早期 ...

  2. C++STL标准库学习笔记(四)multiset续

    自定义排序规则的multiset用法 前言: 在这个笔记中,我把大多数代码都加了注释,我的一些想法和注解用蓝色字体标记了出来,重点和需要关注的地方用红色字体标记了出来,只不过这一次的笔记主要是我的补充 ...

  3. 层次分析法、模糊综合评测法实例分析(涵盖各个过程讲解、原创实例示范、MATLAB源码公布)

    目录 一.先定个小目标 二.层次分析法部分 2.1 思路总括 2.2 构造两两比较矩阵 2.3 权重计算方法 2.3.1 算术平均法求权重 2.3.2 几何平均法求权重 2.3.3 特征值法求权重 2 ...

  4. 【论文笔记】Leveraging Post-click Feedback for Content Recommendations

    Leveraging Post-click Feedback for Content Recommendations Authors: Hongyi Wen, Longqi Yang, Deborah ...

  5. CF748A Santa Claus and a Place in a Class 题解

    Content 圣诞老人坐在一个桌子被摆成 \(m\) 行 \(n\) 列的教室里.每个桌子有两个座位,每个位置从左往右都有编号,依次为 \(1,2,3,...,2\times n\times m\) ...

  6. LuoguP7259 [COCI2009-2010#3] SORT 题解

    Content 请编写一个"频率排序器".输入一个 长度为 \(n\) 的数列 \(A=\{a_1,a_2,\dots,a_n\}\),要求: 按照每个数的出现次数降序排列. 如果 ...

  7. microsoft project 出现不能保存为xls文件时可以按照如下方法解决

    工具->选项->安全性

  8. JAVA获取指定日期的周一的日期

    /** * 获取当前周的周一的日期 * @param date 传入当前日期 * @return */ public static Date getThisWeekMonday(Date date) ...

  9. Qt5绘制仪表盘dashboard

    说明 本文演示Qt版本: Qt5.14. 本文将使用QPainter一步一步绘制仪表盘:刻度.指针.刻度值 注意: 绘制顺序,如果先绘制,则后来绘制的将会覆盖住先前绘制的. 如果需要绘制半透明, 请设 ...

  10. java源码——0~9十个数字不重复地使用使加法表达式成立

    这个问题是在我写个的几个博客里较为复杂的一个.首先,先看看整个问题的表述. 星号表示0~9的一个数字,而且不允许重复,使得下面的加法表达式成立.输出所有结果. ※ ※ ※ ※ ※    +  2   ...