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)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...
随机推荐
- aha
欢迎使用 MWeb MWeb 是专业的 Markdown 写作.记笔记.静态博客生成软件,目前已支持 Mac,iPad 和 iPhone.MWeb 有以下特色: 软件本身: 使用原生的 macOS 技 ...
- spring security oauth2搭建resource-server demo及token改造成JWT令牌
我们在上文讲了如何在spring security的环境中搭建基于oauth2协议的认证中心demo:https://www.cnblogs.com/process-h/p/15688971.html ...
- Python pyecharts绘制漏斗图
一.pyecharts绘制漏斗图方法简介 funnel.add()方法简介add(name, attr, value, funnel_sort="ascending", funne ...
- 由一次 UPDATE 过慢 SQL 优化而总结出的经验
最近,线上的 ETL 数据归档 SQL 发生了点问题,有一个 UPDATE SQL 跑了两天还没跑出来: update t_order_record set archive_id = '420a7fe ...
- CF999C Alphabetic Removals 题解
Content 给定一个长度为 \(n\) 的仅含小写字母的字符串,执行 \(k\) 次如下操作: 如果字符串中有 a 这个字母,删除从左往右第一个 a,并结束操作,否则继续操作: 如果字符串中有 b ...
- 贪心——55. 跳跃游戏 && 45.跳跃游戏II
给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] 输出: true ...
- JAVAWEB项目处理XSS漏洞攻击处理方案
对页面传入的参数值进行过滤,过滤方法如下 public static String xssEncode(String s) { if (s == null || s.equals("&quo ...
- IDEA设置默认maven配置
我们有时候自己在本机上配置了一个maven环境.但是IDEA每次新开一个项目都要重新选择一个maven的配置就很麻烦,可以使用这个进行设置默认的maven配置 有的版本IDEA不同显示的内容和图片的不 ...
- nanogui之更新子模块glfw3.3.2踩坑总结
nanogui源码下载: A . https://github.com/wjakob/nanogui B . https://github.com/dalerank/nanogui B是fork的A, ...
- c++11之日期和时间库
本文主要介绍 std::chrono日期和时间用法. 演示环境: vs2017 0.头文件 1 #include <chrono> 2 #include <thread>// ...