uni-app、小程序之swiper-item内容过多显示不全的解决方案
最近在项目遇到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内容过多显示不全的解决方案的更多相关文章
- 小程序swiper-item内容过多显示不全的解决方案
最近在项目遇到swiper高度不能自适应,导致swiper-item 里面的内容过多时只能显示一部分,最终解决方案:<swiper current="{{currentTab}}&qu ...
- 微信小程序1rpx border ios真机显示不全问题
无意间测试发现,把border的颜色的透明度颜色改成0.99就可以了.1就不行. 边框显示不全的写法: border:1rpx solid rgba(244,84,80,1); 将边框代码的透明度改成 ...
- 关于如何解决PHPCMS V9内容搜索显示不全问题解决方案
站长朋友们都晓得只要是开源的PHP程序都会有漏洞存在.如果想完美的建站就需要自己去研究打补丁了.最近很多站长联系小编咨询用phpcms建站当在首页搜索内容的时候有的居然搜索不到.小编感到很是奇怪于是就 ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解
Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解 说明:Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解,加密算法,是现在每个软件项目里必须用到的内容. 广泛应用在包括 ...
- uni与小程序,vue的区别
标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
- Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)
Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...
随机推荐
- Jenkins构建通知
目录 一.简介 二.推送到gitlab 三.邮件通知 自带配置 Email Extension 四.钉钉通知 五.脚本钉钉通知 六.HTTP请求通知 一.简介 类似于监控报警,jenkins在配置持续 ...
- ios导出ipa文件
步骤1:选择运行设备,IOS Device 步骤2:选择Product --- Archive开始编译(注意第一步一定要选IOS Device,否则此步Archive为灰sè无法操作) 步骤3:一段 ...
- <转>企业应用架构 --- 分层
系统架构师-基础到企业应用架构-分层[上篇] 一.前言 大家好,接近一年的时间没有怎么书写博客了,一方面是工作上比较忙,同时生活上也步入正轨,事情比较繁多,目前总算是趋于稳定,可以有时间来完善以前没有 ...
- LightningChart .NET v.10.2.1已经发布了!
LightningChart .NET v.10.2.1已经发布了! 了解更多关于兼容性和优化方面的最新改进. 主要改进 我们很高兴地宣布LightningChart .NET产品系列的第三个主要版本 ...
- 2020腾讯犀牛鸟网络安全T-Star高校挑战赛writeup
签到 浏览器禁用js,在www目录下有 key 命令执行基础 使用 | 可以执行其他命令,在 ../目录下有 key.php cat 一下读出来 你能爆破吗 一开始随便输了个账号的时候不是这个页面,抓 ...
- AT2202 硬度フェスティバル / Kode Festival 题解
Content 有 \(2^n\) 块石头,第 \(i\) 块石头硬度为 \(a_i\).重复执行以下操作直到只剩下一块石头为止: 让当前编号为 \((1,2)\).\((3,4)\).-- 的石头互 ...
- LuoguP7398 [COCI2020-2021#5] Šifra 题解
Content 给定一个长度 \(n\) 的只包含小写字母和 \(0\sim9\) 的字符串(字符串中的字母可视为分隔符).求字符串中包含多少个不同的数字. 数据范围:\(1\leqslant n\l ...
- java 输入输出IO流 IO异常处理try(IO流定义){IO流使用}catch(异常){处理异常}finally{死了都要干}
IO异常处理 之前我们写代码的时候都是直接抛出异常,但是我们试想一下,如果我们打开了一个流,在关闭之前程序抛出了异常,那我们还怎么关闭呢?这个时候我们就要用到异常处理了. try-with-resou ...
- Python3 day6面向对象
http://www.cnblogs.com/alex3714/articles/5188179.html ====================生活中==================== 世界 ...
- 简单备忘一下Linux下的wget和curl如何使用http proxy
简单备忘一下Linux下的wget和curl如何使用http proxywget -e "http_proxy=porxyhost:port" www.baidu.comcurl ...