微信小程序自定义封装组件（轮播图）

原创于 2024-06-19 16:23:59 发布 · 164 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

<swiper autoplay indicator-dots indicator-color="rgba(255,255,255,0.2)" indicator-active-color="white" circular interval="3000" style="width: {{width}};height: 400rpx;" bindtap="move">
  <swiper-item wx:for="{{banner}}" wx:key="index">
    <image src="{{item.imgUrl}}" style="width: 100%;height: 100%;" />
  </swiper-item>
</swiper>





//xxx.js  组件接收父传递的值
  // props  父传子的参数
  properties: {
    banner: {
      type: Array,
    },
    width:{
      type:String
    }
  },


//父组件调用 需在  .json文件引入自定义轮播组件
 "usingComponents": {
    "mySwiper":"../../components/mySwiper"
  },

//页面直接调用
<mySwiper banner="{{banner}}" width="{{'750rpx'}}" wx:if="{{showSwiper}}"></mySwiper>