美文网首页
利用Taro的Swipe封装的轮播组件

利用Taro的Swipe封装的轮播组件

作者: T_guo | 来源:发表于2022-11-07 18:20 被阅读0次

背景描述

由于我们目前几个小程序,广告轮播用到比较频繁,为了方便在taro的Swipe组件上进行了二次封装。该轮播组件是taro+vue3写的,写的有不足的大方各位大佬勿喷,欢迎各路大神指正。

直接上代码

<template>
  <view class="swiper-banners">
    <swiper
      class="swiper-banners-layout"
      :autoplay="data.autoplay"
      circular="true"
      @change="swiperChange"
      v-show="bannersList.length > 0 ? true : false"
    >
      <swiper-item v-for="(item, index) in bannersList" :key="index" @tap="clickBannerItem(index, item)">
        <image class="swiper-banners-layout-item-img" :src="item.url" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!--重置小圆点的样式 -->
    <view class="swiper-banners-dots" v-show="bannersList.length > 1 ? true : false">
      <view
        v-for="(item, index) in bannersList"
        :key="index"
        :class="data.currentSwiper == index ? 'swiper-banners-active' : 'swiper-banners-dot'"
      ></view>
    </view>
  </view>
</template>
<script setup>
import { watch } from 'vue';
import { reactive } from 'vue';

const props = defineProps({
  bannersList: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['clickBannerItem']);

let data = reactive({
  autoplay: false,
  compress: '?x-oss-process=image/resize,w_720',
  currentSwiper: 0,
});

watch(
  () => props.bannersList,
  newVal => {
    if (newVal) {
      data.autoplay = true;
    }
  },
);

const swiperChange = res => {
  // 监听
  data.currentSwiper = res.detail.current;
};

const clickBannerItem = (index, item) => {
  emit('clickBannerItem', index, item);
};
</script>

<style lang="scss">
.swiper-banners {
  position: relative;
  margin: 0 16px;
  border-radius: 8px;
  overflow: hidden;

  .swiper-banners-layout {
    width: 343px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    //适配ios
    transform: translateY(0);

    .swiper-banners-layout-item-img {
      width: 343px;
      height: 80px;
      border-radius: 8px;
    }
  }

  .swiper-banners-dots {
    position: absolute;
    top: 69px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;

    .swiper-banners-dot {
      width: 4px;
      height: 4px;
      background: #ffffff;
      opacity: 0.2;
      border-radius: 5px;
      margin-right: 4px;
    }

    .swiper-banners-active {
      width: 12px;
      height: 4px;
      background: #ffffff;
      opacity: 0.8;
      border-radius: 5px;
      margin-right: 4px;
    }
  }
}
</style>

如何使用

  1. 首页引入组件
/*具体路径可以根据自己的情况去写*/
import Banners from '../xx/xx/Banners';
import { reactive} from 'vue';
/*定义数据*/
const data = reactive({
  banners: [{ url: "xxxxxx" }],
});
  1. 在使用的地方写如下
/*具体路径可以根据自己的情况去写*/
<Banners
      class="banner-content"
      :bannersList="banners"
      @clickBannerItem="clickBannerItem()"
></Banners>
  1. banner事件
//banner点击
const clickBannerItem = (index, item) => {
console.log(index, item);
};

相关文章

  • 利用Taro的Swipe封装的轮播组件

    背景描述 由于我们目前几个小程序,广告轮播用到比较频繁,为了方便在taro的Swipe组件上进行了二次封装。该轮播...

  • 面向对象实战

    封装轮播组件 轮播 封装曝光加载组件 曝光加载 封装Tab 组件 Tab组件

  • 封装组件

    封装tab组件封装曝光加载组件封装轮播组件 代码

  • 面向对象实战

    1、tab组件封装2、轮播组件封装3、曝光组件封装

  • 页面整页轮播切换及内部嵌套内容轮播

    移动端页面,所以选择了Vant组件库,轮播部分用Swipe 轮播。 安装: 引入: 用法: 此处首先设置轮播方向为...

  • 组件

    题目1: 封装一个轮播组件轮播组件轮播组件2,使用IIFE 题目2: 封装一个曝光加载组件曝光加载组件 题目3: ...

  • 3面向对象实战

    参考:tab组件229曝光组件187轮播组件172轮播二次封装154 我的: 1: 封装一个轮播组件 http:/...

  • 面向对象实战

    题目1: 封装一个轮播组件轮播组件题目2: 封装一个曝光加载组件曝光加载组件题目3: 封装一个 Tab 组件Tab 组件

  • 封装(面向对象)

    题目1: 封装一个轮播组件 轮播封装 题目2: 封装一个曝光加载组件 曝光加载 题目3: 封装一个 Tab 组件 ...

  • 面向对象实战

    题目1: 封装一个轮播组件封装轮播组件(效果)代码题目2: 封装一个曝光加载组件封装曝光加载(效果)代码题目3: ...

网友评论

      本文标题:利用Taro的Swipe封装的轮播组件

      本文链接:https://www.haomeiwen.com/subject/yifitdtx.html