微信小程序[电商]-自定义 Banner(轮播图)组件

Posted gdragon

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序[电商]-自定义 Banner(轮播图)组件相关的知识,希望对你有一定的参考价值。

自定义组件的意义

大部分的项目都会需要Banner组件,而每个项目在需要Banner功能时我们都需要重复写这些代码,
那么我们可以将其作为自定义组件,在下次使用是直接使用即可。
这也是自定义组件存在的意义:代码复用、降低耦合、便于维护

vant-weapp组件库中还没有提供Banner组件,所以我们来实现Banner组件,顺便了解自定义组件的实现过程。

参考
【自定义组件】:官方文档
【微信小程序自定义组件实现 tabBar、navBar:实现案例】

相信上面的两个链接可以帮助我们很好的实现了自定义组件。
那么这里我直接上 banner 的自定义组件.

首先明确我们的banner需要提供哪些功能,我这里就简单罗列几个需求:

  • 展示图片(必需)
  • 展示标题
  • 展示指示器
  • 自动轮播

以上需求基本就是banner的基本功能了。
在微信小程序中提供了Swiper组件,基本可以满足以上的需求
这里也是使用Swiper来实现banner功能。

components文件夹下创建banner文件夹,在该文件夹下创建自定义组件component
技术图片
index.wxml中的布局文件内容如下:

<view class=‘swiper‘>
	<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" previous-margin="10px" next-margin="10px">
		<block wx:for="{{banners}}" wx:key="_id">
			<swiper-item catchtap="onBannerItemClick" data-id=‘{{item._id}}‘>
				<image src="{{item.thumb}}" class="slide-image" />
				<text class=‘slide-text‘ wx:if="{{showTitle}}">{{ item.title }}</text>
			</swiper-item>
		</block>
	</swiper>
</view>

index.js中处理自定义组件的自定义字段,如是否显示标题通过showTitleBoolean值来判断:


Component({
  /**
   * 组件的属性列表
   */
  properties: {
    showTitle:{
      type: Boolean,
      value: true
    },
    indicatorDots:{
      type: Boolean,
      value: true
    },
    circular:{
      type: Boolean,
      value: true
    },
    autoplay:{
      type: Boolean,
      value: true
    },
    interval:{
      type: Number,
      value: 2000
    },
    duration:{
      type: Number,
      value: 1000
    },
    banners:{
      type: Array,
      value: null
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
   
  },
  
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * item 点击事件
     * @param {点击参数} e 
     */
    onBannerItemClick: function(e){
      var myEventDetail = e.currentTarget.dataset.id // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent(‘click‘, myEventDetail,myEventOption)
    },

    /**
     * 动态改变是否显示 title
     */
    showTitle: function(isShowTitle){
      console.log(isShowTitle)
      this.data.showTitle = isShowTitle
      this.setData({
        showTilte:this.data.showTitle
      })
    }
  }
})

以上一顿操作就完成自定义banner组件。
接下来我们看一下怎么使用定义好的组件。

使用组件

项目中是在home页面使用,所以在home.json文件总导入组件

"usingComponents": {
    "banner": "../../components/banner/index"
  }

接着在home.wxml布局中使用组件

<banner id="homeBanner" banners="{{banners}}" bindclick="onBannerItemClick"></banner>

banner组件中需要传入轮播图片集合banners,那么我们还需要在home.js中获取到轮播图片集合然后传递给home.wxml中的banners

// 通过云开发获取 banner 数据
getBannerData: function () {
 db.collection(Constant.tableName.home_list)
   .where({
     is_banner: true
   })
   .get().then(res => {
     that.setData({
       banners: res.data
     })
   })
},

组件间通信

参考:【组件间通信与事件】

自定义组件传递事件给父页面

例如:banner组件中需要将组件的点击事件传递给home.js中处理

在自定义banner组件的index.wxml中处理点击事件:
技术图片
然后index.js中使用 triggerEvent 方法,指定事件名、detail对象和事件选项:

methods: {
  // item 点击事件
  onBannerItemClick: function(e){
    var myEventDetail = e.currentTarget.dataset.id // detail对象,提供给事件监听函数
    var myEventOption = {} // 触发事件的选项
    this.triggerEvent(‘click‘, myEventDetail,myEventOption)
  },
}

接着在home.wxml中处理triggerEvent 方法传递的事件
注意:
- bindclick:这里的clicktriggerEvent 方法中传递的名称
- onBannerItemClick:这里是点击事件的方法名称,可以和自定义组件中的点击事件方法名称不一致
技术图片
最后在home.js中处理点击事件:

// banner 点击事件
onBannerItemClick: function (e) {
  var id = e.detail
  wx.navigateTo({
    url: ‘../home-detail/home-detail?id=‘ + id,
  })
},

父页面传递事件给自定义组件

例如:home.js中可以通过点击按钮将banner组件标题动态控制显示

在自定义banner组件的index.js中定义好方法,如:

  //  组件的方法列表
  methods: {
    // 动态改变是否显示 title
    showTitle: function(isShowTitle){
      console.log(isShowTitle)
      this.data.showTitle = isShowTitle
      this.setData({
        showTilte:this.data.showTitle
      })
    }
  }

home.jsonReady方法中可以通过selectComponent获取到子组件的实例:

  // const child = this.selectComponent(‘.homeBanner‘); 通过 class 的方式
  const child = this.selectComponent(‘#homeBanner‘); // 通过 id 的方式
  console.log(child)
  child.showTitle(true)

上车

佛系原创号主,主要分享 Flutter、微信小程序、android相关知识点。
技术图片



















以上是关于微信小程序[电商]-自定义 Banner(轮播图)组件的主要内容,如果未能解决你的问题,请参考以下文章

小程序轮播图样式

微信小程序自定义swiper轮播图面板指示点的位置

小程序swiper轮播图不显示

自定义微信小程序swiper轮播图面板指示点的样式

如何自定义微信小程序swiper轮播图面板指示点的样式

Android 最完善的自定义Banner轮播图之一,带给你最全面的体验