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

目录

 封装组件——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

组件的属性与方法——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

index.js

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

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



	});