微信小程序-轮播图swiperDemo

项目展示

实现的效果图如上图所示

本Demo实现从本地图库中调用图片轮播显示

开发过程中遇到的问题

图片渲染错误

图片路径错误报错
解决方法：小程序开发图片路径需要在相对路径前加‘/’才能找到该图片（真是奇怪的要求）
本人不能理解原因，如果有大佬知道欢迎在评论区留言！

图片显示比例问题

出现图片不显示或不完整或过分拉伸的问题,下面的解决办法是我个人调整得到的，如果有更好的办法，也欢迎在评论区留下！
解决办法：

1. 编写了pic-size样式width: 100%;height: 100%;,在view模块和swiper-item模块均载入保证100%覆盖
2. 标明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%;
}

本文章为作者原创，如有不足还请不吝赐教，如需转载请注明出处