最近在项目遇到swiper高度不能自适应,导致swiper-item 里面的内容过多时只能显示一部分,最终解决方案:
<swiper current="{{currentTab}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
<swiper-item>
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">
内容放在这
</scroll-view>
</swiper-item> </swiper>
swiper-item {
overflow: scroll;
}

最后在后台动态获得屏幕可视区域高度clientHeight即可

  onLoad: function () {
var that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
clientHeight: res.windowHeight-
});
}
})
}

小程序swiper-item内容过多显示不全的解决方案的更多相关文章

  1. uni-app、小程序之swiper-item内容过多显示不全的解决方案

    原文 最近在项目遇到swiper高度不能自适应,导致swiper-item 里面的内容过多时只能显示一部分,最终解决方案: <swiper> <swiper-item> < ...

  2. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  3. 微信小程序swiper使用网络图片不显示问题

    @ wxml代码: <view class="container"> <swiper indicator-dots="true}" autop ...

  4. 关于如何解决PHPCMS V9内容搜索显示不全问题解决方案

    站长朋友们都晓得只要是开源的PHP程序都会有漏洞存在.如果想完美的建站就需要自己去研究打补丁了.最近很多站长联系小编咨询用phpcms建站当在首页搜索内容的时候有的居然搜索不到.小编感到很是奇怪于是就 ...

  5. 小程序swiper实现订单页面

    小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...

  6. 微信小程序swiper高度自适应,swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  7. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  8. 小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题

    问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...

  9. 关于小程序 input 组件内容显示不全(显示的长度不满 input 宽度)问题

    问题:小程序的input组件经常用到,但在使用input组件的时候会出现一种现象:明明设置了input的宽度,但是输入的内容显示的长度范围却怎么都不到一整个input组件的宽度,而且后面没显示的地方无 ...

随机推荐

  1. luoguP5162 WD与积木

    我怎么这么zz啊.... 法一: 枚举最后一层的方案:没了... 法二: 生成函数:没了. k*F^k(x),就是错位相减. 法三: 我的辣鸡做法:生成函数 求方案数,用的等比数列求和....多项式快 ...

  2. sqlserver 获取实例上用户数据库的数据字典

    原理很简单:将获取数据字典信息(通过动态视图获取)存入到目标表(数据字典表)中即可. 本人自用实例 1)创建相关的字典表 use YWMonitor GO SET ANSI_NULLS ON GO S ...

  3. git 安装 使用过程遇到的问题

      git add "文件名"->git commit -m 'add' ->>git push origin develop 1.git基础之切换分支 选择gi ...

  4. kafka集群配置总结

    虽然很简单,但会遇到很多奇怪的坑,而且网上解决方法搜不到. 首先下载kafka包,解压缩后,修改conf/server.properties文件,基本配置项如下(省略了部分默认配置项 : broker ...

  5. AtCoder ABC 132E Hopscotch Addict

    题目链接:https://atcoder.jp/contests/abc132/tasks/abc132_e 题目大意 给定一张 N 个点 M 条边无自环无重边的一张有向图,求从起点 S 能否三步三步 ...

  6. java oop遍历List和Map的几种方法

    一.list的遍历 import java.util.*; public class ListTest { public static void main(String[] args) { List& ...

  7. shell 命令 查找命令find,grep

    1.find 查找文件 [ find -name 文件名 ] 在当前目录及子目录中找这个文件 [ find -iname 文件名 ] 在当前目录及子目录中找这个文件,不区分大小写 [ find -na ...

  8. nodejs入门安装与调试,mac环境

    install nvm (node version manager) 安装nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v ...

  9. 使用FastJson转化Json格式

    1.下载Jar包 http://repo1.maven.org/maven2/com/alibaba/fastjson/ 2.将jar包导入工程 3.示例 package nc.testFastJso ...

  10. Fence Obstacle Course

    Fence Obstacle Course 有n个区间自下而上有顺序的排列,标号\(1\sim n\),第i个区间记做\([l_i,r_i]\),现在从第n个区间的起点s出发(显然s在\([l_n,r ...