营销活动中，轮播图效果是比较常见的，基于轮播图拓展的组件也很多，这里记录一下使用swiper实现卡片式轮播的过程，分为PC端和小程序端，其中PC端是Vue+typescript，小程序端是uni-app。
使用场景为管理后台配置相关参数实现预览效果，小程序根据配置实现相应效果。

vue卡片式轮播

前期

后台中使用了vue-awesome-swiper，安装依赖。

yarn add swiper vue-awesome-swiper
# or
npm install swiper vue-awesome-swiper -S

vue-awesome-swiper参考文档：vue-awesome-swiper
swiper的参考文档：swiper中文网
vue-awesome-swiper中的属性和配置基本同swiper，注意swiper3和swiper≥3区别有点大，具体以安装版本为主。

使用

导入组件

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
@Component({components: {Swiper,SwiperSlide}
})

template基本结构

<Swiperref="myswiper":options="option_swiper"class="swiper"@slideChange="slideChange"><SwiperSlidev-for="(item, index) in images":key="index"><img:class="bem('image')":src="item.ImageUrl"></SwiperSlide><divslot="pagination"class="swiper-pagination swiper-pagination-white"/></Swiper>

源数据

// 图片数据
@Prop({default() {return []}
}) images!: anyprivate option_swiper: any = {pagination: {el: '.swiper-pagination'},autoplay: {disableOnInteraction: false},watchOverflow: true,loop: true,observer: true, // 当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiperobserveParents: true, // 当Swiper的父元素变化时，例如window.resize，Swiper更新centeredSlides: true,spaceBetween: 20, // 轮播项间距slidesPerView: 1.3 // 用于展示轮播项数量，非整数能露出前后一部分}public activeIndex: number = 0 // 可以用来自定义指示器索引get myswiper() {// @ts-ignorereturn this.$refs.myswiper.$swiper}public slideChange() {this.activeIndex = this.myswiper.realIndex}

初始化
由于是组件，数据是通过props传参的，这里最好监听一下数据源，在数据改变时及时变换效果。

@Watch('images', { immediate: true, deep: true })
onImageChanged(val: any) {this.$nextTick(() => {// 可选if (val.length <= 1) {this.myswiper.autoplay.stop()this.myswiper.update()} else {this.myswiper.slideToLoop(0) // 在Loop模式下Swiper切换到指定slidethis.myswiper.autoplay.start()}})
}

效果

注意

swiper需要以单独组件存在，动态更改option配置不会起作用。即如果有其他配置项，需要新建一个组件，更改option_swiper，例如：

private option_swiper: any = {pagination: {el: '.swiper-pagination'},autoplay: {disableOnInteraction: false},watchOverflow: true,loop: true,observer: true,observeParents: true,centeredSlides: true,spaceBetween: 20,slidesPerView: 1.5}

小程序卡片式轮播

小程序实现轮播用的是小程序自带组件：swiper和swiper-item。通过修改swiper的previous-margin和next-margin实现前边距/后边距，可用于露出前/后一项的一小部分

template结构

<view class="image-ad"><swiper:autoplay="true":circular="true":previous-margin="swiperMargin":next-margin="swiperMargin"@change="onSwiperChanged"><swiper-item v-for="(item, index) in imgList" :key="index" class="image-ad__item"><view class="image-ad__img-wrap" :style="{margin: activeIndex !== index ? '0 10rpx' : 0}"><image class="image-ad__image" mode="widthFix" :src="item.ImageUrl" :style="{width: swiperLargeWidth + 'rpx'}" /></view></swiper-item></swiper><view v-if="imgList.length > 1" class="image-ad__dots"><view v-for="(item, index) in imgList" :key="index" class="image-ad__dot" :class="{'is-active': activeIndex === index}" /></view>
</view>

2.数据管理

props: {value: {type: Object,default () {return {Images: []}}}
},
data() {activeIndex: 0,imgList: []
},
computed: {swiperLargeWidth() {// 可以根据实际UI计算当前项图片宽度return 580}
},
watch: {value: {handler(val) {this.swiperMargin = val.Style === 'large' ? `65rpx` : `0`this.imgList = val.Images}}
}

样式
主要scss如下，指示器根据自己项目写就不罗列了。

$prefix: 'image-ad';
.#{$prefix} {position: relative;&__item {display: flex;overflow: hidden;}&__img-wrap {position: relative;width: 100%;height: 100%;flex: 1;overflow: hidden;box-sizing: content-box;}&__image {display: block;width: 100%;margin: 0 auto;}
}

最后

实际项目中有很多种风格可以配置，这里只是简单以卡片式轮播举例子。

后台和小程序实现卡片式轮播图相关推荐

小程序好看卡片式轮播
效果图: wxml  <view class="swiper-view"><swiper class="swipers ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
uniapp卡片式轮播图——uView
1.下载安装uView uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 2.在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vu ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...

后台和小程序实现卡片式轮播图

vue卡片式轮播

前期

使用

效果

注意

小程序卡片式轮播

最后

后台和小程序实现卡片式轮播图相关推荐

最新文章

热门文章