<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. javascript, jquery, nodejs学习2

    debug tools http://stackoverflow.com/questions/1911015/how-to-debug-node-js-applications node inspec ...

  2. zookeeper 图形化的客户端工具:ZooInspector

    查看Zookeeper中的数据,我们可以通过ZkCli.sh命令客户端查看,但是不太直观,因为Zookeeper本身数据是以树型结构存储组织的, 今天推荐一个实用的界面操作工具ZooInspector ...

  3. docker 容器时间跟宿主机时间同步

    docker 容器时间跟宿主机时间同步 docker cp /etc/localtime 87986863838b:/etc/docker cp /etc/localtime container-na ...

  4. NET设计模式 第二部分 行为型模式(18):观察者模式(Observer Pattern)

    概述 在软件构建过程中,我们需要为某些对象建立一种“通知依赖关系” ——一个对象(目标对象)的状态发生改变,所有的依赖对象(观察者对象)都将得到通知.如果这样的依赖关系过于紧密,将使软件不能很好地抵御 ...

  5. 基于CRF序列标注的中文依存句法分析器的Java实现

    这是一个基于CRF的中文依存句法分析器,内部CRF模型的特征函数采用 双数组Trie树(DoubleArrayTrie)储存,解码采用特化的维特比后向算法.相较于<最大熵依存句法分析器的实现&g ...

  6. R3注入的四种方式

    DLL注入 1.首先要获取想要注入的进程句柄(OpenProcess) 2.从要注入的进程的地址空间中分配一段内存(VirtualAllocEx) 3.往分配的内存位置写入要注入的DLL名称(Writ ...

  7. iOS-微信分享多张图片(UIActivityViewController多图分享和多图分享失败)

    前言 微信分享到朋友圈,可分享的类型有:文字类型.图片类型.音乐类型.视频类型和网页类型,但是我们在做图片分享的时候发现微信给的API只能分享一张图片,达不到一些APP的需求,而产品汪或者Boss想要 ...

  8. 时钟分频方法---verilog代码

    时钟分频方法---verilog代码 本文以SDI播出部分的工程为例,来说明一种时钟分频的写法.SD-SDI工程中播出时钟tx_usrclk为148.5MHz,但tx_video_a_y_in端的数据 ...

  9. Windows 消息【二】窗口函数

    前一篇文章讲到非队列消息会直接把消息Dispatch到窗口函数上,窗口函数长什么样? //就是一个大case分支 //要想拦截消息,override窗口函数是一个办法! procedure TCust ...

  10. 分析Ajax请求并抓取今日头条街拍美图

    项目说明 本项目以今日头条为例,通过分析Ajax请求来抓取网页数据. 有些网页请求得到的HTML代码里面并没有我们在浏览器中看到的内容.这是因为这些信息是通过Ajax加载并且通过JavaScript渲 ...