原文

最近在项目遇到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. [BUUCTF]PWN——bjdctf_2020_babyrop2

    bjdctf_2020_babyrop2 附件 步骤: 例行检查,64位程序,开启了NX和canary保护 2. 试运行一下程序,看看大概的情况 提示我们去泄露libc 3. 64位ida载入,从ma ...

  2. 拖动条形图设置任务关联(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 仅仅是知悉了四种任务关联,那只是纸上谈兵,要把这四种关联真正用到Project上才行,所以我们就要来设置任务关联了. 这是 ...

  3. CF1130A Be Positive 题解

    Content 有一个长度为 \(n\) 的数组 \(a_1,a_2,a_3,...,a_n\),试找出一个数 \(d\),使得数组中的每个数除以 \(d\) 得到的 \(n\) 个结果中至少有 \( ...

  4. CF675A Infinite Sequence 题解

    Content 给定三个整数 \(a,b,c\),问你 \(b\) 是否在以 \(a\) 为首项,公差为 \(c\) 的等差数列中. 数据范围:\(-10^9\leqslant a,b,c\leqsl ...

  5. 关于几种场景下的state

    ​ state jsx 1.state 2.setState 3.函数 事件 调用 mobx 1.state 2.setState( action) 3.view(函数 事件 调用) 一个store ...

  6. JAVA获取请求链接中所有参数(GET请求)

    Enumeration<String> paraNames=request.getParameterNames(); for(Enumeration<String> e=par ...

  7. 【九度OJ】题目1061:成绩排序 解题报告

    [九度OJ]题目1061:成绩排序 解题报告 标签(空格分隔): 九度OJ [LeetCode] http://ac.jobdu.com/problem.php?pid=1061 题目描述: 有N个学 ...

  8. 【LeetCode】609. Find Duplicate File in System 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  9. 1301 - Monitoring Processes

    1301 - Monitoring Processes    PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit:  ...

  10. idea使用教程-idea简介

    集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器.编译器.调试器和图形用户界面等工具.集成了代码编写功 ...