技术小白之记录微信小程序轮播图

初次尝试微信小程序的简单制作过程中，必不可缺的便是主页上的轮播图，在大多数的页面上不难见到的第一眼便是轮播图。本小白在这上面翻阅了许多资料，初步制成一个简单的轮播图，下面介绍下制作过程，以便记忆。
这是我制成的一个简单的轮播图成果
说到轮播图，就必须要了解下swiper（滑块视图容器），具体用法微信公众平台介绍的很详细，
网址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
下面是wxml的代码

<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
  <navigator url="{{item.link}}" hover-class="navigator-hover">
   <image src="{{item.url}}" width="355" height="150"/>
   </navigator> 
  </swiper-item>
 </block>
</swiper>

class=“swiper-box”，是链接上wxss里的代码

  .swiper-box{
    width: 100%;
    height: 200px;
    text-align: center;
  }

indicator-dots="{{indicatorDots}}“是指js里在page（{}）中的一行代码，表示"是否显示面板指示点"，下列表示显示面板指示点

 indicatorDots: true,

autoplay="{{autoplay}}"是指js里在page（{}）中的一行代码，表示“是否自动切换”，下列表示自动切换

autoplay: true,

interval="{{interval}}"是指js里在page（{}）中的一行代码，表示“自动切换时间间隔”，下列表示自动切换时间间隔3s

 interval: 3000,

duration="{{duration}}"是指js里在page（{}）中的一行代码，表示“滑动动画时长”，下列表示滑动动画时长0.5s

duration: 500,

block是包装元素， “block wx:for="{{imgUrls}}" wx:key=“unique””
(1)其中的wx:for="{{imgUrls}}"——在组件上使用 wx:for 控制属性绑定一个数组“imgUrls”，即可使用数组中各项的数据重复渲染该组件。
(2)wx:key=“unique”——如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。（这个unique没看懂~有知道的请帮帮忙解释下，感谢！）
swiper-item仅可放置在swiper组件中，宽高自动设置为100%。
navigator页面链接，
(1)url="{{item.link}}" 指链接地址，
(2)item.link是指在js里的前面说到的数组“imgUrls”里的link，
(3)navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator的子节点背景色应为透明色。
“<image src="{{item.url}}“width=“355” height=“150”/>”，src=”{{item.url}}"表示图源是指数组“imgUrls”里的url，width和height表示图片的宽和高。
如下js代码：

Page({
  data: {
      imgUrls: [        
        {
          link:  '/pages/ywsn/ywsn',      //写入点击链接后的显示页面
          url: '/img/ywsn.png',          //写入显示的本地图片地址
        }, {
          link: '/pages/yscn/yscn',
          url: '/img/cnys.png',
        }, {
          link: '/pages/rgaq/rgaq',
          url: '/img/rgai.png'
        } 
      ],  
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500,
      }
      })

注：本小白为真小白，不喜请勿吐槽。

技术小白之记录微信小程序轮播图

猜你喜欢