uniapp-无缝轮播

在uniapp中有个轮播组件swiper，虽然实现了轮播大部分功能，要弄无缝轮播只要添加个 circular 就可以实现无缝轮播,虽然框架好用，但我们也要知道他怎么写的就自己随便造了轮子组件资源地址

<template><view class="banner-main"><view class="banner" :style="{ height: height + 'rpx' }"><viewclass="banner-bg-box":class="Trans ? 'Trans' : ''":style="{ left: -(current * elementW) + 'px', width: boxWidth + 'px' }"@touchstart="touchstart"@touchmove="touchmove"@touchend="touchend"><slot><image class="banner-bg" :src="item.path" v-for="(item, index) in list" :key="index" @click="imgClick"></image></slot></view><view class="dots" v-if="indicatorDots"><text :class="index == current ? 'active' : ''" v-for="index in banner.length" :key="index"></text></view></view></view>
</template><script>/*** banner 组件* @description 自定义banner 组件* @property {Array} banner 轮播数据 *          结构 banner : [{path : '/static/home/banner.png',url : '',},{path : '/static/class/class-img.png',url : '',},{path : '/static/home/live.png',url : '',}],*  @property {String|Number} index 下标*  @property {String|Number} time 播放时间*  @property {String|Number} height 轮播高度*  @property {Boolean} autoplay 自动播放*  @property {Boolean} indicatorDots 是否显示圈圈* */
export default {data() {return {startX: 0, //触摸开始位置moveX: 0, //移动的位置elementW: 0, //元素的宽度transLeft: 0, //位移距离boxWidth: 9999, //盒子的宽度Trans: false, //滑动效果current: 0, //默认下标timer: null, //定时器frequency: 0, //次数list: [] //轮播数据};},props: {/* 轮播数据 */banner: {type: Array,default() {return [];}},//下标index: {type: [String, Number],default: 1},// 自动播放autoplay: {type: Boolean,default: true},/* 播放时间 */time: {type: [String, Number],default: 3000},/* 轮播高度 */height: {type: [String, Number],default: 279},/* 是否显示圈圈 */indicatorDots: {type: Boolean,default: true}},mounted() {this.setConfig();},created() {console.log(12144);},watch: {banner(val) {if (this.frequency < 1 && this.list.length == 0) {this.frequency++;this.hanldData();this.setConfig();}}},methods: {/* 处理轮播数据 这里用的是最基本的轮播  头尾各加一张的写法 */hanldData() {let banner = JSON.parse(JSON.stringify(this.banner));let leng = banner.length - 1;let homeBanner = banner[0],lastBanner = banner[leng];banner.unshift(lastBanner);banner.push(homeBanner);this.list = banner;},/* 获取对应相关数据 */setConfig() {const that = this;if (that.banner.length != 0) {if (this.list.length == 0) {this.hanldData();this.setConfig();} else {/* 获取下标 */that.current = that.index || 1;/* 计算banner宽度 */this.elementW = uni.upx2px(690);that.Trans = false;that.transLeft = that.elementW * that.current;that.boxWidth = that.list.length * that.elementW;/* 添加过度效果 */let timer = null;clearTimeout(timer);timer = setTimeout(function() {that.Trans = true;/* 是否开启自动轮播 */if (that.autoplay) {that.auto();}}, 300);}}},/* 开始触摸 */touchstart(e) {const touches = e.touches[0];let clientX = touches.clientX,clientY = touches.clientY;this.startX = clientX;clearInterval(this.timer);},/* 触摸移动 */touchmove(e) {const touches = e.touches[0];let clientX = touches.clientX,clientY = touches.clientY;this.moveX = clientX;},/* 触摸结束 */touchend(e) {if (this.moveX - this.startX > 0) {//向右滑动this.sliderRight();} else {//向左滑动this.sliderLeft();}this.changeCurrent();if (this.autoplay) {this.auto();}},changeCurrent() {this.$emit('change', this.current);},/* 向左滑动 */sliderLeft() {const that = this;this.current++;this.Trans = true;if (this.current >= this.list.length - 1) {this.Trans = false;this.current = 0;setTimeout(() => {this.current++;this.Trans = true;}, 30);}},/* 向右滑动 */sliderRight() {const that = this;this.current--;this.Trans = true;if (this.current <= 0) {this.Trans = false;this.current = this.list.length - 1;setTimeout(() => {that.Trans = true;that.current--;}, 30);}},/* 自动播放 */auto() {const that = this;that.timer = null;clearInterval(that.timer);that.timer = setInterval(() => {that.sliderLeft();}, that.time);},/* 图片点击事件 */imgClick(){/* 逻辑操作 也可以暴露出去 */console.log('点击了图片');}}
};
</script><style lang="scss" scoped>
.banner {width: 690rpx;height: 279rpx;background-position: 690rpx 0;position: relative;overflow: hidden;border-radius: 10rpx;position: relative;.banner-bg-box {height: 100%;position: absolute;top: 0;left: 690rpx;transition: none;&.Trans {transition: all 1s;}.banner-bg {width: 690rpx;height: 100%;float: left;}}.dots {position: absolute;left: 50%;bottom: 0rpx;transform: translateX(-50%);text {display: inline-block;width: 20rpx;height: 20rpx;background: #ccc;margin: 0 5rpx;border-radius: 50%;&.active {background: $main-color;}}}
}
</style>

上面为组件的简单封装，然后在需要的地方引入组件调用就可以了

效果

uniapp-无缝轮播相关推荐

左右无缝轮播图的实现
无缝轮播图: <title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.ba ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
前端全栈大佬是如何使用javaScript实现一个无缝轮播优化
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...
前端全栈大佬是如何使用javaScript实现一个无缝轮播
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...
【案例】图片无缝轮播效果
知识点: 1.scrollLeft属性 2.克隆节点 3.定时器 4.鼠标移入移除事件 <!DOCTYPE html> <html lang="en"> & ...
html轮播文字上下轮播,js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本文字上下无缝轮播 * { margin: 0; ...
例子---JS无缝轮播图
DuangDuang,今天我们来一起说说JS实现无缝轮播.没错,顾名思义,就是我们脑子中浮现的类似淘宝主页面中间部分的那个滚动图.这个轮播图的使用频率还是很大的,所以还是很有必要好好研究一下的. 哈哈 ...
html的动画效果实现无限轮播,利用 CSS3 实现的无缝轮播功能代码
无缝轮播的原理图 1 . html的架构 : JavaScript: /*轮播图*/ function banner() { var banner = document.querySelector(' ...
轮播图（无缝轮播图）
1.无缝轮播核心: 在最后多加一张第一张图, 当达到最后一张t1的时候一瞬间将ul拉回到0的位置结构: <div class="wrap"><ul>&l ...
js实现左右无缝轮播图
今天让我们再来做一个左右无缝的轮播图吧! 一.准备html代码 html代码也叫结构 <!DOCTYPE html> <html lang="zh-CN"> ...

uniapp-无缝轮播

uniapp-无缝轮播相关推荐

最新文章

热门文章