微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情

原理:

利用css3 横轴滚动属性overflow:scroll,设置死swiper高度为100vh,这时会产生css3滚动条,隐藏掉swiper-item::-webkit-scrollbar 即可.

详情示例见:https://www.cnblogs.com/cisum/p/10443412.html

 1 swiper {
2 width: 100%;
3 height: 100vh;
4 padding: 0;
5 }
6
7 swiper-item {
8 line-height: 350px;
9 overflow: scroll;
10 }
11
12 swiper-item::-webkit-scrollbar {
13 display: none;
14 }

  

微信小程序 - 自适应swiper高度(非组件)的更多相关文章

  1. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  2. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 小程序-文章:微信小程序常见的UI框架/组件库总结

    ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...

  4. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  5. 微信小程序学习笔记五 常见组件

    1. 常见组件 重点讲解小程序中常用的布局组件 1.1 view 代替 原来的div标签 <!-- pages/index/index.wxml --> <view hover-cl ...

  6. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  7. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...

  8. 微信小程序开发之picker选择器组件用法

    picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...

  9. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

随机推荐

  1. Chrome 如何知道网站启用了SPDY 协议?

    地址栏输入chrome://net-internals/#spdy 在host后查看协议,google和dropbox用https协议的开启了 3. 也可以通过安装插件来查看(SPDY Indicat ...

  2. 在Android工程中加入AIDL文件时,gen目录生成的文件报错-问题解决

    from://http://blog.csdn.net/watt520/article/details/10099047 今天在弄清除缓存的东东,按照网上别人的方法,创建了一个AIDL文件,这个时候发 ...

  3. apk中添加第三方so文件

    如果你是把so放在libs/armeabi/下,eclipse中so会自动打包进去,然后使用System.load("data/data/xxx.xxx.xxx/lib/xx.so" ...

  4. Java 正则表达式格式化时间显示

    /* * test.java * Version 1.0.0 * Created on 2017年12月16日 * Copyright ReYo.Cn */ package reyo.sdk.util ...

  5. java 日历类Calendar用法

    如何获取昨天?取昨天的日期,本想的截出来日期减一就好了.又一想不对,如果今天是一号怎么办? 现有两个办法 1: Date as = new Date(new Date().getTime()-24*6 ...

  6. 明日传奇第三季/全集Legends of Tomorrow迅雷下载

    <明日传奇>第三季将加入一名新的女性角色.据Variety得到的消息称,塔拉·阿什(Tala Ashe)将作为<明日传奇>第三季的常规演员加入该剧.在第三季中,塔拉·阿什饰演的 ...

  7. itunes connect 改版后无法访问的处理办法

    很悲剧,今天要提交版本,结果itunes connect改版,然后进不去了, 限于无限loading- 是网速慢吗?再等等,先吃个饭,待会再来看-   ------------------------ ...

  8. MyEclipse的破解和汉化方法

    一.安装和破解 我的MyEclipse是从官网下的正版软件,在其他地方下载的版本同理. 官方下载地址(需FQ): http://www.myeclipseide.com/module-htmlpage ...

  9. JAVA中对List<map<String,Object>>根据map某个key值进行排序

    方法compareTo()比较此对象与指定对象的顺序.如果该对象小于.等于或大于指定对象,则分别返回负整数.零或正整数.返回整数,1,-1,0:返回1表示大于,返回-1表示小于,返回0表示相等. 普通 ...

  10. Promise is rejected: Error: 2 UNKNOWN: error starting container: API error (404): {"message":"network build-blockchain-insurance-app_default not found"}出错的解决方案

    错误描述: docker logs web 现象: > blockchain-for-insurance@2.1.0 serve /app > cross-env NODE_ENV=pro ...