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)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...
随机推荐
- Mysql原有环境部署多个版本
目录 一.环境准备 二.下载安装包 三.Mysql-5.7单独部署 四.启动Mysql-5.7 五.muliti使用 一.环境准备 原先已经有一个5.6版本的数据库在运行了,当前操作是完全不影响原数据 ...
- Nginx区分PC和手机
目录 一.简介 二.配置 nginx识别手机端跳转到wap pc端跳转移动端 一.简介 有时候需要当手机访问PC站页面时自动跳转到对应的手机站页面. 二.配置 nginx识别手机端跳转到wap 即手机 ...
- Python把两个列表索引相同的值相加
方案一 list1=[1,2,3,4,5] list2=[6,7,8,9,10] list3=[] list3=[i + j for i, j in zip(list1, list2)] print( ...
- 转:android相对布局
android相对布局 Activity布局初步 - 相对布局 1. 相对布局的基本概念 一个控件的位置它决定于它和其他控件的关系,好处:比较灵活:缺点:掌握比较复杂. 2. 相对布局常用属性介绍 这 ...
- Table.Group分组…Group(Power Query 之 M 语言)
数据源: 10列55行数据,其中包括含有重复项的"部门"列和可求和的"金额"列. 目标: 按"部门"列进行分组,显示各部门金额小计. 操作过 ...
- 分组依据(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 [视图]选项卡下,[筛选器]楼下,住着个[分组依据]. 这个功能,说白了,就是指定个"组",把同一组的 ...
- 解决android studio no debuggable process
这个问题可能是由多种因素造成的. 一.可能是buildtypes配置或选择错误,在对应module的build.gradle中确认如下配置 debug { debuggable true//一定要配置 ...
- LuoguB2035 判断数正负 题解
Content 给定一个数 \(n\),判断这个数的正负. 数据范围:\(-10^9\leqslant n\leqslant 10^9\). Solution 一个基础的分支结构题. if-else ...
- java 多线程Thread 子类 定时器Timer
定时器Timer, 定时器分类: 1,指定时间指定任务(明天早上8点准时提醒我起床),相当于linux里面的at命令 2,周期性的执行任务(每隔三分钟闹钟响一次),相当于Linux里面的cron命令 ...
- CentOS系统 python3+python2 & Ipython安装
https://www.cnblogs.com/albertrui/p/8093384.html 一.安装依赖环境 输入命令: yum -y install zlib-devel bzip2-deve ...