微信小程序之轮播图组件封装

目录

 封装组件——mp-rotationchat

组件的属性与方法——swiper-rotation-chat.js

组件的引入

使用封装组件——mp-rotationchat

文件目录

• components（所有组件位置）
  • swiper-roatiton-chat（轮播图组件包）
    • swiper-rotation-chat.wxml
    • swiper-rotation-chat.js
• pages（所有页面）
  • index（初始页面）
    • index.js
    • index,wxml

 封装组件——mp-rotationchat

组件的定义：swiper-rotation-chat.wxml

<view class="rotationchat">
	<swiper autoplay="{{true}}" bindchange="rotationChange" style="height:400rpx;">
		<swiper-item wx:for="{{rotationChat}}">
			<view bindtap="tap" hover-class="swiper-item_hover" data-index="{{index}}">
				<!-- 图片未加载出来时的占位 -->
				<view class="swiper-item_stoken" wx:if="{{!item.loaded}}">
					<view class="ant-skeleton-loading" style="width:100%;height:400rpx"></view>
				</view>
				<image class="img" src="{{item.imageUri}}" hidden="{{!item.loaded}}" data-index="{{index}}" bindload="imgLoaded"></image>
			</view>
		</swiper-item>
	</swiper> 
	<view class="rotationchat-spot">
		<view wx:for="{{rotationChat}}" class="{{index == currtRotaitonChat ? 'rotationchat-spot-curt':''}}"></view>
	</view>
</view>

组件的属性与方法——swiper-rotation-chat.js

  /**
 * 组件的初始数据
 */

  data: {
    currtRotaitonChat: 0
  },


 /**
   * 组件的方法
   */
methods: {
    rotationChange(e) {
      this.setData({
        currtRotaitonChat: e.detail.current
      })
    },

       ...
},

组件的引入

全局引入在app.json，当前页引入比如"index.json"中

{
  "usingComponents": {
    "mp-rotationchat": "../../components/swiper-roatiton-chat/swiper-rotation-chat",
    ...
    
  }
}

使用封装组件——mp-rotationchat

index.wxml

		<!--轮播图 -->
		<view class="banner_img">
			<mp-rotationchat rotationChat="{{rotationChat}}" bind:click="tapRotationChat"></mp-rotationchat>
		</view>

index.js

• rotationChat:          数组
• tapRotationChat：微信小程序API,保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
  • 参数:url

Page({
	    data: {
		rotationChat: [],	
            ...
          },
	tapRotationChat: function (e) {
		wx.navigateTo({
			url: e.detail.toUri
		});
	},
            ...



	});