uni-app仿美团美食团购轮播
代码
<template> <view> <view style="display: flex;align-items: center;margin: 20rpx;"> <text style="font-weight: bold;white-space: nowrap;margin-right: 20rpx;">饮品/甜品</text> <view style="width: 100%;"> <view style="width: 100%;display: flex;background-color: #fff;border-radius: 30rpx;display: flex;align-items: center;padding: 10rpx;"> <u-icon name="search" style="margin-right: 10rpx;"></u-icon> <input style="width: 100%;" placeholder="请输入商家名或商品名称" /> </view> </view> </view> <view style="background-color: #fff;border-radius: 25rpx;padding: 20rpx;margin: 25rpx;"> <view style="display: flex;justify-content: space-between;padding: 0 0;"> <text style="font-weight: bold;margin-bottom: 10rpx;">附近都在喝</text> <view style="display: flex;align-items: center;color: orangered;"> <text>查看更多</text> <u-icon name="arrow-right"></u-icon> </view> </view> <view style="background-color: #fff;position: relative;height: 350rpx; overflow: hidden;"> <view style="display: flex;overflow: hidden;position: absolute;" :style="{'left':marginLeft+'rpx'}"> <view @touchstart="touchstart" @touchend="touchend($event,index)" class="item" :style="{'border':index == currentIndex?'':'2rpx solid #eee','margin-right':index == currentIndex?'10rpx':'10rpx','width':index == currentIndex?'440rpx':'170rpx','overflow':index == currentIndex?'':'hidden','transition':isAnimation?'all .3s':''}" v-for="(item,index) in list" style="display: flex;overflow: hidden;border-radius: 15rpx;"> <view :style="{'transition':isAnimation?'all .3s':''}" style="display: flex;font-size: 25rpx;"> <view style="margin-right: 10rpx;position: relative;"> <image style="width: 170rpx;height: 250rpx;border-radius: 10rpx;" :src="item.image"></image> <view v-if="index != currentIndex" style="position: absolute;left: 0;bottom: 0;display: flex;flex-direction: column;background-color: #fff;width: 100%;padding: 0 0;"> <text style="font-weight: bold;text-align: center;margin-bottom: 5rpx;">青山白柚...</text> <view style="display: flex;align-items: center;color: orangered;margin-bottom: 7rpx;"> <text style="font-size: 20rpx;font-weight: bold;">￥</text> <text style="font-size: 25rpx;font-weight: bold;">11.25</text> <view style="border: 2rpx solid orangered;border-radius: 5rpx;padding: 0 5rpx;margin-left: 5rpx;"> 7.5折 </view> </view> </view> </view> <view style="white-space: nowrap;background-color: #f5f5f5;padding: 20rpx;margin-left: -10rpx;margin-top: 20rpx;height: calc(100% - 20rpx);padding-left: 7rpx;"> <view style="display: flex;flex-direction: column;"> <text style="font-weight: bold;font-size: 30rpx;">爆品冷萃茶2选1</text> <text style="color: gray;white-space: nowrap;">茶百道（金山枫泾古...</text> </view> <view style="background-color: orangered;color: #fff;width: fit-content;padding: 5rpx;border-radius: 10rpx;margin-top: 10rpx;"> <text>回头客多</text> </view> <view style="display: flex;margin-top: 10rpx;align-items: center;"> <view style="font-size: 30rpx;color: orangered;"> <text style="font-size: 25rpx;">￥</text> <text style="font-size: 30rpx;">6.66</text> </view> <view style="border-radius: 5rpx;color: orangered;border: 2rpx solid orangered;padding: 5rpx;margin: 0 10rpx;">8.4折</view> <view style="text-decoration: line-through;color: gray;">￥8</view> </view> </view> </view> <!-- <view style="display: flex;flex-direction: column;width: 200rpx;" v-else> <view style="margin-right: 10rpx;"> <image style="width: 150rpx;height: 200rpx;border-radius: 10rpx;" :src="item.image"></image> </view> <view> <text>青山白柚...</text> <view> <view style="font-weight: bold;color: orangered;"> <text>￥</text> <text>11.25</text> <view>7.5折</view> </view> </view> </view> </view> --> </view> </view> <!-- <u-swiper :list="list"></u-swiper> --> </view> </view> </view> </template> <script> export default { data() { return { isAnimation:true, currentIndex:1, marginLeft:-175, originList: [{ id:0, image: 'https://img0.baidu.com/it/u=4147813612,122739285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666', title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方' },{ id:0, image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.2C5SSJ3NYLOT3Jr6xeUj8gHaLH?w=186&h=279&c=7&r=0&o=5&pid=1.7', title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方' }, { id:1, image: 'https://img2.baidu.com/it/u=2818603572,2916403253&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666', title: '溯洄从之，道阻且长。溯游从之，宛在水中央' }, { id:2, image: 'https://img.zcool.cn/community/01dd5a5e4ccad5a80120a895c06cc9.jpg@1280w_1l_2o_100sh.jpg', title: '溯洄从之，道阻且长。溯游从之，宛在水中央' } ], list: [{ id:0, image: 'https://img0.baidu.com/it/u=4147813612,122739285&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666', title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方' },{ id:0, image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.2C5SSJ3NYLOT3Jr6xeUj8gHaLH?w=186&h=279&c=7&r=0&o=5&pid=1.7', title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方' }, { id:1, image: 'https://img2.baidu.com/it/u=2818603572,2916403253&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666', title: '溯洄从之，道阻且长。溯游从之，宛在水中央' }, { id:2, image: 'https://img.zcool.cn/community/01dd5a5e4ccad5a80120a895c06cc9.jpg@1280w_1l_2o_100sh.jpg', title: '溯洄从之，道阻且长。溯游从之，宛在水中央' } ], startX:0 } }, methods: { touchstart(e) { if (e.touches.length == 1) { //设置触摸起始点水平方向位置 this.startX=e.touches[0].clientX; } console.log(e,'touchstart------') }, touchend(e,index) { console.log(index,'-----') if (e.changedTouches.length == 1) { //手指移动结束后水平位置 var endX = e.changedTouches[0].clientX; let diff = endX-this.startX; if(Math.abs(diff)>20){ if(diff>0){ console.log("左滑..."); if(index==1) { this.marginLeft += 175 this.currentIndex -= 1 setTimeout(() => { this.isAnimation = false let list = this.originList // list.pop() this.list = list.concat(list) this.marginLeft = -(list.length)*183 console.log(this.marginLeft,'--',list) this.currentIndex = list.length this.$nextTick(() => { setTimeout(() => { this.isAnimation = true },300) }) },300) } else { this.marginLeft += 183 this.currentIndex -= 1 } }else{ // this.currentIndex = this.list[this.list.findIndex(item => {return item.id==index})+1].id if(index==this.list.length-2) { this.marginLeft -= 180 this.currentIndex += 1 setTimeout(() => { this.isAnimation = false let list = this.originList // list.pop() this.list = list.concat(list) this.marginLeft = -(list.length-2)*180 console.log(this.marginLeft,'--',list) this.currentIndex = list.length-2 this.$nextTick(() => { setTimeout(() => { this.isAnimation = true },300) }) },300) } else { this.marginLeft -= 182 this.currentIndex += 1 } console.log("右滑..."); } // if(index == 0) { // this.list.unshift(this.list[this.list.length-1]) // this.list.pop() // } // console.log('--------',this.marginLeft) } } console.log(e,'touchend------') } } } </script> <style> </style>
效果图
