最近在项目遇到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. 兼容火狐浏览器的select下拉框样式

    经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是! 好东西来了,现在能调成跟 ...

  2. 报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren

    今天在做Vue的时候,子组件关闭的时候,报如下错误 报错:vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since th ...

  3. C++之内存分区

  4. ionic-CSS:ionic 卡片

    ylbtech-ionic-CSS:ionic 卡片 1.返回顶部 1. ionic 卡片 近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具. 针对移动端的应用,卡片会根据 ...

  5. AtCoder ABC 127F Absolute Minima

    题目链接:https://atcoder.jp/contests/abc127/tasks/abc127_f 题目大意 初始状态下$f(x) = 0$,现在有 2 种模式的询问,第一种以“1 a b” ...

  6. Codeforces 1166B - All the Vowels Please

    题目链接:http://codeforces.com/problemset/problem/1166/B 个元音. 思路:先判断能否弄出至少5*5的行列,然后按顺序填字符串就好了. AC代码: #in ...

  7. spring boot junit test

    这里分三种,1.测普通方法或通过原生java API接口调用 2.基于spring依赖注入调用 3.controller层调用 需要引入依赖:默认springboot已经引入 <dependen ...

  8. adb shell 查看内存信息

    1.根据包名来查看指定的APP指定数据adb shell "top | grep com.xxx.xxx" 由于这样打印出来的数据没有参数名,可以参考这个命令来看:adb shel ...

  9. 【牛客提高训练营5B】旅游

    题目 吉老师的题时过一年还是不会做 从\(1\)号点出发经过每条边至少一次并且还要回到\(1\)号点,这跟欧拉回路的条件非常像,但是欧拉回路的实际上是"经过每一条边恰好一次并且回到出发点&q ...

  10. js面向对象编程:this究竟代表什么?第二篇

         总觉得自己弄明确了js中this的含义.this总是指向调用方法的对象,作为方法调用,那么this就是指实例化的对象.但前几天自己写脚本却遇到了一个非常奇怪的问题.    代码例如以下:   ...