项目展示
实现的效果图如上图所示
本Demo实现从本地图库中调用图片轮播显示
开发过程中遇到的问题
图片渲染错误
图片路径错误报错
解决方法:小程序开发图片路径需要在相对路径前加‘/’才能找到该图片(真是奇怪的要求)
本人不能理解原因,如果有大佬知道欢迎在评论区留言!
图片显示比例问题
出现图片不显示或不完整或过分拉伸的问题,下面的解决办法是我个人调整得到的,如果有更好的办法,也欢迎在评论区留下!
解决办法:
- 编写了pic-size样式
width: 100%;height: 100%;
,在view模块和swiper-item模块均载入保证100%覆盖 - 标明mode参数
mode="scaleToFill"
,其中scaleToFill表示缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来,具体参数可以查看 小程序官网.
轮播图组件不显示
向大佬们请教这个轮播图组件不显示的问题。
我在下面写了一个textarea
时轮播图组件才会显示,不会单独显示轮播图,想不通原因,请赐教!
运行代码
xml部分
<view class="container">
<view class="page-body">
<view class="swiper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{navList}}" wx:key="*this">
<swiper-item>
<view class="swiper-item pic-size">
<image
mode="scaleToFill"
src="{{ item }}" role="img"
class="pic-size"
></image>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view style="margin-top: 20rpx">
<textarea
style="text-align:center ">轮播图Demo</textarea>
</view>
</view>
</view>
JS部分
Page({
data: {
navList: ['/pic/test1.jpeg','/pic/test2.png','/pic/test3.png'],
indicatorDots: true,//是否显示轮播点
vertical: false,//是否竖直轮播
autoplay: true,//是否自动播放
interval: 5000,//自动播放间隔时长
duration: 500//幻灯片切换时长
}
})
wxss部分
.pic-size{
width: 100%;
height: 100%;
}
本文章为作者原创,如有不足还请不吝赐教,如需转载请注明出处