微信小程序使用swiper制作轮播图留白的解决方法

微信小程序相比网页制作轮播图快捷了很多，直接可以使用swiper标签，但是对于新手来说，也有很多不可避免的坑。

附上轮播图代码

<view class="swp"><swiper style="height:220px;" indicator-dots="true" indicator-active-color="red" indicator-color="white" autoplay="true" interval="3000" interval="3000" circular="true"><swiper-item><image src="/images/sw1.png" bindtap="gzh"></image></swiper-item><swiper-item><image src="/images/sw2.png" bindtap="comi"></image></swiper-item></swiper>
</view>

你可能会发现右边的一大片空白

也有可能机型选择在电脑上看不到空白，但是在手机预览时看到了

与其这样得过且过，不如一次搞定

道理其实很简单，swiper下的图片被强制设定了宽度。所以只需要在swiper外围的view定位到image属性进行设置即可

在前面的基础上，在wxss下编写以下代码

.swp image{
width: 100%;
}

预览，就是下图这个样子了

swiper属性设置

属性名	类型	默认值	说明
indicator-dots	Boolean	FALSE	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	FALSE	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	FALSE	是否采用衔接滑动
vertical	Boolean	FALSE	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items	Number	1	同时显示的滑块数量
skip-hidden-item-layout	Boolean	FALSE	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
bindanimationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail 同上

微信小程序使用swiper制作轮播图留白的解决方法相关推荐

微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
微信小程序之swiper无限轮播实现效果
照文档上的去做实现的swiper轮播图,其效果是每次图片轮播到最后一张时页面会快速的倒退滚动到第一张然后再轮播这样效果实在太差.解决方法:是加入circular属性即可实现无缝轮播.
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...
微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...
【微信小程序】好看的轮播图组件
微信小程序好看的轮播图组件效果示例使用步骤第一步: 新建components文件夹第二步: 按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致) 第三步: 各个文件的代码: ...

微信小程序使用swiper制作轮播图留白的解决方法

微信小程序使用swiper制作轮播图留白的解决方法相关推荐

最新文章

热门文章