swiper 组件高度被限制为150px了,所以内容无法撑开。

解决办法

给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小。图片模式设置为 宽度不变 自动适应高度

<swiper class="test" .....>
<swiper-item>
<image mode='widthFix' ...... />
</swiper-item>
</swiper> <style>
.text{
  height:200px;
}
image{
width:100%;
height:auto;
}
</style>

微信小程序 swiper 组件坑的更多相关文章

  1. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

  2. 微信小程序--swiper组件

    <view class='swiper-container'> <swiper indicator-dots="true" autoplay=" ver ...

  3. 第五篇、微信小程序-swiper组件

    常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{ ...

  4. 微信小程序 image组件坑

    远程图片 在真机上测试时 image组件只能显示http请求的图片, 对https 与 //xxx.xxx.xx 之类的不能显示. 可显示 'http://img.alicdn.com/i2/8323 ...

  5. 微信小程序swiper组件实现图片宽度自适应

    wxml 代码: <!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indic ...

  6. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  7. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

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

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

  9. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

随机推荐

  1. PAT 甲级 1065 A+B and C (64bit) (20 分)(溢出判断)*

    1065 A+B and C (64bit) (20 分)   Given three integers A, B and C in [−], you are supposed to tell whe ...

  2. Text Prompted Remote Speaker Authentication : Joint Speech and Speaker Recognition/Verification System :: Major Project ::: Introduction

    转载自:http://ganeshtiwaridotcomdotnp.blogspot.com/2010/12/text-prompted-remote-speaker.html Biometrics ...

  3. 迅速生成项目-react-scripts

    推荐指数:

  4. HTML布局排版5 测试某段html页面1

    除了div,常见的还有用table布局,这里直接用前面博文的页头页尾,如下面的页面的部分,是个简单的table.该页面样式,如果拖动浏览器,可以看到table和文本框总是居中,但是文本框下方那两个按钮 ...

  5. Node.js Sequelize如何实现数据库的读写分离

    一.前言 在构建高并发的Web应用时,除了应用层要采取负载均衡方案外,数据库也要支持高可用和高并发性.使用较多的数据库优化方案是:通过主从复制(Master-Slave)的方式来同步数据,再通过读写分 ...

  6. Shell脚本运行报错Bad substitution解决办法

    环境Ubuntu18.4.02 脚本运行报错 # sh test.sh test.sh: 2: test.sh: Bad substitution 原因 从 ubuntu 6.10 开始,ubuntu ...

  7. git的使用学习(五)git的分支管理

    分支管理 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平 ...

  8. 你应该知道的4个DSP开发支持库

    引言 在dsp开发中,为了节省开发时间和难度,TI将一些成熟的算法封装为模块,供开发者使用.如果能充分利用这些算法支持库,对于加快dsp开发进程与提高代码质量.稳定性有非常大的帮助. Digital ...

  9. axios 使用入门

    [Vue 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门   一.前言# 在没有接触 React.Angular.Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重 ...

  10. solr搜索结果转实体类对象的两种方法

    问题:就是把从solr搜索出来的结果转成我们想要的实体类对象,很常用的情景. 1.使用@Field注解 @Field这个注解放到实体类的属性[字段]中,例如下面 public class User{ ...