<view class='swiper-container'>
<swiper indicator-dots="true"
autoplay="true" interval="" vertical="{{false}}" class='swiper' class='aaa'>
<block wx:for="{{imgUrls}}">
<swiper-item >
<image src="{{item}}"class="slide-image" style='width:100%;height:100%'/>
</swiper-item>
</block>
</swiper>
</view>

刚刚练习布局使用了一下swiper容器;

遇到的问题:1.外层嵌套<view class='container'></view>该组件不显示;

2.在iphone5显示是宽度占满屏幕的;换了更大屏幕占不满,右边有空隙;

解决办法:1通过实验这个组件外层就是不能嵌套<view class='container'></view>,但是把class改成其他就可以正常显示;

这是因为app.wxss中全局规定了container的样式把它删了就可以正常显示了(艹,这是重点啊);

2改<image>的宽和高是不能使该组件宽度占满屏i幕的,要改外层的<view>或直接改<swiper>的width为100%;这样无论在什么屏幕都可以占满了;

3改<swiper-item>的属性没什么卵用使图片占满每个item完全显示,要设置image的宽和高都为100%,但是图片大小不合适会变形;

补充:<image>组件的mode属性,可以控制图片的缩放;

scaleToFill    不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit    保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill    保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix    宽度不变,高度自动变化,保持原图宽高比不变

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

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

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

  2. 微信小程序 swiper 组件坑

    swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper ...

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

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

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

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

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

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

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

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

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

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

  8. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  9. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

随机推荐

  1. Hi3520DV200和Hi3520DV300

    处理器:V200---arm A9 600M主频V300---arm A7 800M主频 编码解码能力:V200---8路D1或者4路720PV300---8路D1或者4路1080p或者9路720p ...

  2. 【Hi3516】 uboot下烧写BSP

    setenv serverip xx.xx.xx.xx setenv ipaddr xx.xx.xx.xx setenv ethaddr xx:xx:xx:xx:xx:xx setenv netmas ...

  3. uglifyjs-webpack-plugin 插件,drop_console 默认为 false(不清除 console 语句),drop_debugger 默认为 true(清除 debugger 语句)

    uglifyjs-webpack-plugin 插件,drop_console 默认为 false(不清除console语句),drop_debugger 默认为 true(清除 debugger 语 ...

  4. 将 vue 挂在 window 对象上,实现能调用 elementUI 的组件

    html 部分: <div id="sample"> </div> js 部分(将js代码放在 body 的 onload事件中: <body onl ...

  5. haproxy参数

    https://blog.csdn.net/chengfei112233/article/details/78983026 https://www.cnblogs.com/dkblog/archive ...

  6. KNN算法原理(python代码实现)

    kNN(k-nearest neighbor algorithm)算法的核心思想是如果一个样本在特征空间中的k个最相邻的样本中的大多数属于某一个类别,则该样本也属于这个类别,并具有这个类别上样本的特性 ...

  7. Qt中的标准对话框之QMessageBox

    1. Qt标准对话框 Qt为开发者提供了一些可复用的对话框类型 Qt提供的可复用对话框全部继承自QDialog类 Qt中的对话框的使用方式和QDialog完全一致 2. 标准对话框的使用步骤 ①定义对 ...

  8. Hystrix 详细说明

    在 Hystrix 入门中,使用 Hystrix 时创建命令并给予执行,实际上 Hystrix 有一套较为复杂的执行逻辑,简单来说明以下运作流程: 在命令开始执行时,会做一些准备工作,例如为命令创建响 ...

  9. windows下安装redis以及测试 --转载自http://www.cnblogs.com/lpyan/p/5608333.html

    redis加入到Windows 服务 以下方式,需要在redis-2.8.24下执行:http://download.csdn.net/download/feiliua/9425770 ,另外php的 ...

  10. Cygwin使用1-root用户登录

    设置cygwin中的root用户登录 在windows中模拟linux环境,可以安装cygwin.cygwin安装之后,系统默认的是以你的windows用户名做为cygwin的登录名的.权限却依然是普 ...