微信小顺序组件swiper连系模板的运用

2024年2月3日 341次阅读 来源: 月影

微信小顺序的swiper组件

本日进修了微信小顺序的swiper组件。参考官网template和swiper

一、新建模板

在组件文件夹components下新建一个模板文件swiper.wxml。
template 运用name属性，作为模板的名字（模板的唯一标识符，运用时用is属性声明）。然后在<template/>内定义swiper代码片断 ，代码以下：

<!--template swiper.wxml-->
<template name="swiperCon">
<swiper indicator-dots="{{swiperCon.indicatorDots}}" indicator-color="{{swiperCon.indicatorColor}}" indicator-active-color="{{swiperCon.indicatorActiveColor}}"
        autoplay="{{swiperCon.autoplay}}" interval="{{swiperCon.interval}}" duration="{{swiperCon.duration}}" >
    <block wx:for="{{swiperCon.imgUrls}}" wx:key="*this">
        <swiper-item>
            <image src="{{item}}" class="slide-image"  />
        </swiper-item>
    </block>
</swiper>
</template>

二、运用模板

在挪用页面运用模板。运用 is 属性，声明须要运用的模板（模板是零丁的wxml文件，须要import引入）
然后将模板所须要的 data 传入

<!--index.wxml-->
<import src="../components/swiper.wxml"/>
<template is="swiperCon" data="{{swiperCon}}"/>

三、设置data

在js中设置swiper参数

/*index.js*/
Page({
  data: {
      swiperCon: {
          imgUrls: [
              '../../images/banner-1.png',
              '../../images/banner-2.png'
          ],
          indicatorDots: true,//是不是显现面板指导点
          indicatorColor: "rgba(0, 0, 0, .3)",//指导点色彩
          indicatorActiveColor: "#007aff",//当前选中的指导点色彩
          autoplay: true,//是不是自动切换
          interval: 5000,//自动切换时候距离
          duration: 1000,//滑动动画时长
          circular: true,//是不是采纳连接滑动
           }
      }
})

完全案例

    原文作者：月影
    原文地址: https://segmentfault.com/a/1190000009808847
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞