原文

最近在项目遇到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. 8、Redis五大数据类型---哈希(Hash)

    一.哈希(Hash)简介: Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis hash 是一个键值对集合. 二.常用命令 1.h ...

  2. uniapp实现钉钉扫码登录

    由于uniapp暂无钉钉授权登录所以本文将钉钉扫码登录作为网页嵌入uniapp,最终实现钉钉扫码登录app 1. 用H5调起钉钉扫码登录 钉钉在网页端的扫码登录可参考钉钉文档:扫码登录第三方网站 - ...

  3. OAuth2.0实战:认证、资源服务异常自定义!

    大家好,我是不才陈某~ 这是<Spring Security 进阶>的第4篇文章,往期文章如下: 实战!Spring Boot Security+JWT前后端分离架构登录认证! 妹子始终没 ...

  4. Jenkins集成jira

    目录 一.Jenkins中Jira插件安装 二.Jenkins中Jira配置 一.Jenkins中Jira插件安装 点击 Manage Jenkins-->Manage Plugins--> ...

  5. Nginx配置缓存

    目录 一.简介 二.配置 三.其它参数 忽略Cache-Control头部 缓存post请求 缓存动态内容 使用Cookie作为缓存键的一部分 手动清理缓存 支持断点续传 设置查看缓存命中与否 一.简 ...

  6. 千兆车载以太网TSN网络测试?TSN Box为您焕新

    TSN概述 在汽车领域内,近几年车内网络通讯方式的变革诉求,期望能够有更高的数据传输速率,以及保证实时性的通讯方式引入.例如对于自动驾驶而言,传统的CAN总线已经远远不能满足其对通讯的要求,而基于以太 ...

  7. IOS开发入门教程-总结篇-写给狂热的编程爱好者们

    程序发轻狂,代码阑珊,苹果开发安卓狂!--写给狂热的编程爱好者们 写在前面的话 学习iOS应用程序开发已有一段时间,最近稍微闲下来了,正好也想记录一下前阶段的整个学习过程.索性就从最基础的开始,一步一 ...

  8. Markdown 语法粗学

    Markdown 语法粗学 Typora下载 Typora官网 下拉点击右上角 选择下载即可 里面选择自己想要的系统下载即可 如果下载缓慢,推荐使用各自的下载工具或者使用软件管家等 亲测迅雷速度尚可 ...

  9. inndy_rop

    又学习到了一个新知识 拿到题目例行检查,发现是32位的程序,放入ida中 进入main看到了一个overflow函数进入查看 存在明显的栈溢出,看到题目知道要用rop来做,但是完全没有思路, 后来发现 ...

  10. 联盛德 HLK-W806 (十一): 软件SPI和硬件SPI驱动ST7567液晶LCD

    目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...