最近在项目遇到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. linux 重定向命令

    标准输入,输出和错误 --------------------------------- 文件文件                描写叙述符 ----------------------------- ...

  2. 在html页面引用css文件的方法

    引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用css方法如 ...

  3. Mac Eclipse常用快捷键

    Option + Command + X: 运行 Command + O:显示大纲 Command + 1:快速修复 Command + D:删除当前行 Command + Option + ↓:复制 ...

  4. 在MRC模式下使用SDWebImage

    在MRC模式下使用SDWebImage (1)在Target->Build Phases->Compile Sources中,给所有的SDWebImage添加-fobjc-arc (2)添 ...

  5. c++11 Thread库写多线程程序

    一个简单的使用线程的Demo c++11提供了一个新的头文件<thread>提供了对线程函数的支持的声明(其他数据保护相关的声明放在其他的头文件中,暂时先从thread头文件入手吧),写一 ...

  6. android studio 一个项目如何打包多个apk

    1.修改app的build.gradle文件 假设我们同一套代码编译2个app:demo1和demo2 android { ... productFlavors { // demo1 demo1 { ...

  7. drupal7 代码生成用户,并自动登录

    直接上代码 1. 生成用户(注册) $edit = [ "name" => "name", "pass" => "pa ...

  8. [转]SSM(Spring+SpringMVC+Mybatis)框架搭建详细教程【附源代码Demo】

    一.新建项目 运行IDEA,进入初始化界面,然后我们选择新建项目(进入主界面新建项目也是一样的) 在Maven选项卡里面找到对应的java web选项,然后我们点下一步 这一步填入组织等信息,这里比较 ...

  9. python3 enum模块

    枚举是绑定到唯一的常量值的一组符号名称(成员).在枚举中,成员可以通过身份进行比较,枚举本身可以迭代. 1.Enum模块 该模块定义了四个枚举类,可用于定义唯一的名称和值集:Enum,IntEnum, ...

  10. thinkphp 原样输出

    可以使用literal标签来防止模板标签被解析,例如: 大理石构件 <literal> <if condition="$name eq 1 "> value ...