微信小程序--swiper组件

<view class=‘swiper-container‘>
<swiper indicator-dots="true"
  autoplay="true" interval="5000" 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    宽度不变,高度自动变化,保持原图宽高比不变

原文地址:https://www.cnblogs.com/changedman/p/9149049.html

时间: 2024-10-07 10:48:38

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

微信小程序 swiper 组件坑

swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper class="test" .....> <swiper-item> <image mode='widthFix' ...... /> </swiper-item> </swiper> <style>.text{ heigh

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

常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx:for="{{im

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

官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址.html和js中使用onerror事件就可以了 <img src="image.gif" onerror="this.src='https:w.chesu

微信小程序image组件开发程序以及相关图片问题参考资料汇总

微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料. 微信小程序image组件必备基础知识: image组件默认宽度300px.高度225px image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式 image组件开发教程汇总: 微信小程序自定义组件实现图片单指拖动.双指缩

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

今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) {  var second = that.data.seco

微信小程序图表组件 wx-f2

摘自 杀个程序猿祭天  https://www.jianshu.com/p/6b9fe45f799f Github地址:https://github.com/antvis/wx-f2 AntV F2地址: AntV F2 微信小程序图表组件 wx-f2,源于 F2,专为移动而生 F2,专为移动而生的可视化解决方案,特为大家提供了微信小程序端版本,体积小巧,性能卓越,底层基于图形语法,可以提供非常丰富的图表类型. 可以使用微信扫描以下二维码先体验一番: image wx-f2 F2 的微信小程序版

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

iView Weapp微信小程序UI组件库中i-input的使用

iView Weapp微信小程序UI组件库为小程序的开发提供了良好的交互界面,组件库自定义了一系列组件,具有较强的开发友好性,但一些组件与微信小程序原生组件的使用方式有差异. i-input组件是该框架自定义的输入框组件,与微信中input具有相同功能. 在使用i-input输入值时,可以增加其bind:change="myInput" 属性,如: wxml: <i-input type="number" right  maxlength="2&qu

微信小程序气泡组件

资料 网址 微信小程序气泡组件 https://github.com/byk04712/weapp-popover 原文地址:https://www.cnblogs.com/cag2050/p/12605725.html