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. ISO/IEC 9899:2011 条款6.7.5——对齐说明符

    6.7.5 对齐说明符 语法 1.alignment-specifier: _Alignas    (    type-name    ) _Alignas    (    constant-expr ...

  2. 线程池+同步io和异步io(浅谈)

    线程池+同步io和异步io(浅谈) 来自于知乎大佬的一个评论 我们的系统代码从同步方式+线程池改成异步化之后压测发现性能提高了一倍,不再有大量的空闲线程,但是CPU的消耗太大,几乎打满,后来改成协程化 ...

  3. C++ STL中常见容器的时间复杂度和比较和分析

    C++ STL中常见容器的时间复杂度 map, set, multimap, and multiset 上述四种容器采用红黑树实现,红黑树是平衡二叉树的一种.不同操作的时间复杂度近似为: 插入: O( ...

  4. osg gdal加载tif数据文件

    osg加载.tif地形数据文件 #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include <iostream> ...

  5. Spring cloud微服务安全实战-3-7API安全机制之数据加密

    这一节来聊一下密码的加密. 加密盐,为了避免两个相同的面加密出来的密文是一样的,每个人的盐不一样, 首先引入工具包,lambdaworks <!-- https://mvnrepository. ...

  6. Spring cloud微服务安全实战-3-2 第一个API及注入攻击防护

    先来写一些用户的基础数据的管理的api.就是用户的基本的增删改查.用spring boot可以很容易的写出这种api 首先新建maven的项目 依赖关系 引入依赖.用最新的spring boot ht ...

  7. BIO

    ===============================================================BIO01================================ ...

  8. Source Insight解决回车缩进过多问题

    摘自:https://jingyan.baidu.com/article/02027811339e651bcc9ce53c.html   新安装的Source Insight软件在编写代码时,回车换行 ...

  9. [译]在Pandas的Dataframe中删除行、列

    导入模块 import pandas as pd 创建dataframe data = {'name': ['Jason', 'Molly', 'Tina', 'Jake', 'Amy'], 'yea ...

  10. Java连接MongoDB示例

    示例代码: package com.zifeiy.snowflake.handle.etl.mongodb; import java.util.ArrayList; import java.util. ...