封装轮播图 （因为基于微博小程序，语法可能有些出入，如需使用需改标签）

server/2024/9/29 21:41:35/

这是在组件中使用，基于微博语法

javascript"><template><wbx-view class="" style="width: 100vw;height: 70vh;"><WBXswiper @change="gaibian" :vertical="false" :current="current" indicatorActiveColor="#fff" indicatorColor="#c0c0c0" :items="items"   style="width: 375px;height: 200px;border-radius: 20px;"><template slot="swiperItem" slot-scope="scope"><wbx-image :src="scope.item.src" mode="aspectFill" style="width:375px; height: 200px;" /></template></WBXswiper><!-- //测试点击切换轮播 --><wbx-view  style="margin-bottom: 30px;"><web-view style="width: 30px;height: 30px;border: 1px solid red;" @click="add(0)"><view-text>0</view-text></web-view><web-view style="width: 30px;height: 30px;border: 1px solid red;" @click="add(1)"><view-text>1</view-text></web-view><web-view style="width: 30px;height: 30px;border: 1px solid red;" @click="add(2)"><view-text>2</view-text></web-view></wbx-view></wbx-view>
</template><script>
/*** @type WBXAppOption*/
import WBXswiper from "../../commpents/WBXswiper/index.vue";
const pageOptions = {data() {return {items: [{ src: 'res/1.jpg',txt:222222},{ src: 'res/1.jpg',txt:222222},{ src: 'res/1.jpg',txt:222222},],current:0}},computed:{},methods: {gaibian(e){console.log(e,'change')},add(index){console.log(this.current)this.current=index}},components: {WBXswiper,},wbox: {onLoad() { },onShow() {// 页面显示/切入前台时触发},onHide() {// 页面隐藏时触发},onUnload() {// 页面退出时触发},},mounted() { },
};
export default pageOptions;
</script><style></style>

自己封装的swiper组件内部

javascript"><template><wbx-viewref="objStyle":style="wrapperStyle"@touchstart="onTouchStart"@touchmove="onTouchMove"@touchend="onTouchEnd"><wbx-viewclass="carousel-wrapper":style="carouselStyle"@transitionend="onTransitionEnd"ref="carouselWrapper"><wbx-view :style="itemStyle"><slot name="swiperItem" :item="items[items.length - 1]"></slot></wbx-view><wbx-view v-for="(item, index) in items" :key="index" :style="itemStyle"><slot name="swiperItem" :item="item"></slot></wbx-view><wbx-view :style="itemStyle"><slot name="swiperItem" :item="items[0]"></slot></wbx-view></wbx-view><wbx-view v-if="indicatorDots" :style="{ width: containerWidth + 'px' }" style="position: absolute; bottom: 10px; display: flex; flex-direction: row; justify-content: center;"><wbx-viewv-for="(item, index) in items":key="index":style="{ backgroundColor: index === realIndex ? indicatorActiveColor : indicatorColor }"style="width: 10px; height: 10px; margin: 0 5px; cursor: pointer; border-radius: 10px;"@click~stop="setCurrentIndex(index)"></wbx-view></wbx-view></wbx-view></template><script>export default {/*items                 数据autoPlay              是否自动播放interval              自动播放间隔时间indicatorDots         是否显示指示点indicatorColor        指示点颜色indicatorActiveColor  当前选中的指示点颜色current               当前所在滑块的indexvertical              滑动方向是否为纵向@change               轮播图改变时会触发 change 事件，返回当前索引值*/props: {items: {type: Array,required: true},autoPlay: {type: Boolean,default: false},interval: {type: Number,default: 3000},indicatorDots: {type: Boolean,default: true},indicatorColor: {type: String,default: '#c0c0c0'},indicatorActiveColor: {type: String,default: '#fff'},current: {type: String,default: ''},vertical: {type: Boolean,default: false}},data() {return {currentIndex: 1,timer: null,startX: 0,startY: 0,offset: 0,isTransitioning: false,containerWidth: 0,containerHeight: 0};},watch: {current(newVal) {this.setCurrentIndex(newVal);}},computed: {wrapperStyle() {return {backgroundColor: "rebeccapurple",position: "relative",width: `${this.wrapperWidth}px`,height: `${this.wrapperHeight}px`,};},carouselStyle() {const baseTranslateValue = -this.currentIndex * (this.vertical ? this.containerHeight : this.containerWidth);const translateValue = baseTranslateValue + this.offset;console.log(this.offset,baseTranslateValue,translateValue,"999999")return {display: 'flex',flexDirection: this.vertical ? 'column' : 'row',transform: this.vertical ? `translateY(${translateValue}px)` : `translateX(${translateValue}px)`,transition: this.isTransitioning ? 'transform 0.3s ease-out' : 'none',width: !this.vertical ? `${this.wrapperWidth}px` : `${this.containerWidth}px`,height: this.vertical ? `${this.wrapperHeight}px` : `${this.containerWidth}px`};},wrapperWidth() {return this.containerWidth * (this.items.length + 2);},wrapperHeight() {return this.containerHeight * (this.items.length + 2);},itemStyle() {return {width: !this.vertical ? `${this.containerWidth}px` : `${this.containerWidth}px`,height: this.vertical ? `${this.containerHeight}px` : `${this.containerWidth}px`,flexShrink: 0};},realIndex() {return (this.currentIndex - 1 + this.items.length) % this.items.length;}},mounted() {this.updateDimensions();this.$nextTick(() => {if (this.autoPlay) {this.startAutoPlay();}});},beforeDestroy() {this.stopAutoPlay();},methods: {updateDimensions() {if (this.$refs.objStyle) {const objStyle =  this.$refs.objStyle.styleObjectthis.containerWidth = parseFloat(objStyle.width);this.containerHeight = parseFloat(objStyle.height);}},startAutoPlay() {this.timer = setInterval(() => {this.next();}, this.interval);},stopAutoPlay() {if (this.timer) {clearInterval(this.timer);this.timer = null;}},next() {this.offset = 0;this.isTransitioning = true;this.currentIndex += 1;this.$emit('change', { current: this.currentIndex });},prev() {this.offset = 0;this.isTransitioning = true;this.currentIndex -= 1;this.$emit('change', { current: this.currentIndex });},setCurrentIndex(index) {this.stopAutoPlay();this.isTransitioning = true;this.currentIndex = index + 1;if (this.autoPlay) {this.startAutoPlay();}},onTouchStart(e) {this.startX = e.touches[0].clientX;this.startY = e.touches[0].clientY;this.offset = 0;this.stopAutoPlay();},onTouchMove(e) {const moveX = e.touches[0].clientX;const moveY = e.touches[0].clientY;this.offset = this.vertical ? moveY - this.startY : moveX - this.startX;},onTouchEnd() {this.isTransitioning = true;if (Math.abs(this.offset) > (this.vertical ? this.containerHeight : this.containerWidth) /6) {if (this.offset > 0) {this.prev();} else {this.next();}} else {this.offset = 0;}if (this.autoPlay) {this.startAutoPlay();}},onTransitionEnd() {this.isTransitioning = false;this.offset = 0;if (this.currentIndex === this.items.length + 1) {this.currentIndex = 1;}if (this.currentIndex === 0) {this.currentIndex = this.items.length;}}}};</script><style></style>

http://www.ppmy.cn/server/124665.html

相关文章

Vue3学习（六）Vue3 + ts几种写法

Vue3学习（六）Vue3 + ts几种写法

前言 官网提到组合式api和选项式api 选项式api其实就是vue2的写法&#xff0c;组合式api是vue3的新写法&#xff08;组合式api可以在script中使用setup&#xff08;&#xff09;也可以使用<script setup>&#xff0c;<script setup>是setup&#xff08;&#xff…
阅读更多...
「接口自动化测试」高频面试题!

「接口自动化测试」高频面试题!

一、json和字典的区别&#xff1f; json就是一个文本、字符串&#xff1b;有固定的格式&#xff0c;格式长的像python字典和列表的组合&#xff1b;以key-value的键值对形式来保存数据&#xff0c;结构清晰&#xff0c;。可以说是目前互联网项目开发中最常用的一种数据交互格式…
阅读更多...
二、初步编写drf API

二、初步编写drf API

2.1基于django #settings.py urlpatterns [path(admin/, admin.site.urls),path(auth,views.auth) #创建一个路由 ]#views.py from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt# Create your views here.c…
阅读更多...
电子信息工程职称评审流程有哪些？

电子信息工程职称评审流程有哪些？

电子信息工程职称评审流程有哪些&#xff1f; 2024年工程类职称评审6大步骤&#xff1a; 1.确认申报条件 2.准备评审材料 3.提交评审材料 4.组织专家评审 5.进入答辩环节 6.职称公示下证 哪些人可以评电子信息工程呢&#xff1f; 从事微电子、计算机与网络、信息与通信、…
阅读更多...
TCP编程:从入门到实践

TCP编程:从入门到实践

目录 一、引言 二、TCP协议原理 1.面向连接 2.可靠传输 三、TCP编程实践 1.TCP服务器 2.TCP客户端 四、总结 本文将带你了解TCP编程的基本原理&#xff0c;并通过实战案例&#xff0c;教你如何在网络编程中运用TCP协议。掌握TCP编程&#xff0c;为构建稳定、高效的网络通信…
阅读更多...
【ARM 嵌入式 C 入门及渐进26 -- 内敛函数和宏定义的区别】

【ARM 嵌入式 C 入门及渐进26 -- 内敛函数和宏定义的区别】

请阅读【嵌入式及芯片开发学必备专栏】 文章目录 内敛函数和宏定义的区别内联函数定义和使用内联函数特点内联函数示例 宏定义和使用宏定义特点宏定义示例 比较总结Sumamry 内敛函数和宏定义的区别 在 C 语言中&#xff0c;内联函数和宏定义都可以用来减少函数调用的开销和提高…
阅读更多...
Oracle 19c 使用EMCC 监控当前所有数据库

Oracle 19c 使用EMCC 监控当前所有数据库

一.EMCC简介 EMCC&#xff0c;全称Oracle Enterprise Manager Cloud Control&#xff0c;是Oracle提供的一套集中化监控工具&#xff0c;可以对数据库、操作系统、中间件等进行监控&#xff0c;通过OMS&#xff08;Oracle Management Service&#xff09;收集监控数据并将监控信…
阅读更多...
不同类型RWA在智能合约开发中的差异

不同类型RWA在智能合约开发中的差异

RWA&#xff08;现实世界资产&#xff09;的类型多样&#xff0c;从房地产、艺术品到股票、债券等&#xff0c;每种资产的特性、价值评估方式、监管要求等都存在差异。这些差异直接影响到智能合约的设计和开发。 1.房地产RWA 复杂性高&#xff1a; 房地产涉及到土地使用权、建…
阅读更多...
最新文章

Copyright @ 2022~2023