微信小程序 组件轮播

一、效果

二、前端

components组件下面新建文件夹scroll-image

<view class="scroll-image-wrapper" wx:if="{{list && list.length > 0}}">
    <view class="title-box flex-space-between">
        <text>{{title}}</text>
        <view class="more" bind:tap="handleRight">
            <text>{{rightText}}</text>
            <text class="iconfont icon-arrow-right"></text>
        </view>
    </view>
    <view class="swiper-parent-view">
        <swiper 
          class="ad-swiper"
          autoplay="{{true}}"
          circular="{{true}}"
          indicator-dots="{{true}}"
          indicator-color="#f0f0f0"
          indicator-active-color="#f4333c"
          interval="3500"       
          duration="600"        
          previous-margin="30rpx"
          next-margin="30rpx">   
            <swiper-item wx:for="{{list}}" wx:key="_id">
                <navigator class="swiper-item-nav" hover-class="none" url="{{item.link}}" open-type="{{item.openType}}">
                    <image class="item-img" src="{{imageBaseUrl}}/uploads/ad/{{item.ad_image}}" mode="widthFix"></image>
                </navigator>
            </swiper-item>
        </swiper>
    </view>
</view>
/* components/scroll-image/index.wxss */
.scroll-image-wrapper {
  margin-top: 30rpx; 
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  .title-box {
      margin: 0 30rpx;
      font-size: 36rpx;
      color: #555;
      font-weight: bold;
      .more {
          color: #a3a3a3;
          font-size: 28rpx;
          font-weight: normal;
          display: flex;
          align-items: center;
      }
      .iconfont {
          font-size: 28rpx;
          margin-left: 8rpx;
      }
  }
  .swiper-parent-view {
      margin-top: 15rpx; 
      box-sizing: border-box;
      width: 100%;
      .ad-swiper {
          width: 100%;
          height: 270rpx;
      }
      .swiper-item-nav {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 20rpx; 
          overflow: hidden;
          box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.08); 
          transform: scale(0.98); 
      }
      .item-img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover; 
      }
    }
}
.ad-swiper .wx-swiper-dots {
  bottom: 10rpx !important; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.ad-swiper .wx-swiper-dot {
  width: 8rpx;
  height: 8rpx;
  margin: 0 4rpx !important;
  border-radius: 50%;
  background: #e8e8e8;
}
.ad-swiper .wx-swiper-dot-active {
  width: 22rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background: #f4333c;
}
// components/scroll-image/index.js
Component({
  options: {
     addGlobalClass: true 
  },
  properties: {
      imageBaseUrl: { type: String, value: '' },
      title: { type: String, value: '推门推荐' },
      rightText: { type: String, value: '更多' },
      list: { type: Array, value: [] }
  },
  methods: {
      handleRight() {
          this.triggerEvent('right')
      }
  }
})
{
  "component": true,
  "usingComponents": {}
}

三、页面引入

index.js
const app = getApp();     
Page({
  data: {
    url: app.globalData.apiDomain.prod, // 网址
    topAds: [],         // 顶部banner数据
    bottomAds: [],      // 底部banner数据
index.wxml使用组件
   <scroll-image list="{{ bottomAds }}" imageBaseUrl="{{url}}" bind:right="toShoppingPage" title="热门推荐" right-text="更多"></scroll-image>
index.json 引入组件
{
  "navigationStyle": "custom",
  "usingComponents": {
    "swiper-banner": "/components/swiper-banner/swiper-banner",
    "scroll-image": "/components/scroll-image/scroll-image"
  }
}

四、后端接口

    // 广告数据获取
    public function getAdLst($ad_position)
    {
        $list = $this->obj->where('status',1)
                          ->where('ad_position',$ad_position)
                          ->order('sort desc')
                          ->limit(6)
                          ->cache(7200)
                          ->select();
        return json(['code'=>1,'data'=>$list,'msg'=>'success']);
    }