IHG/pages/map/scrollHotel.vue

<template>
	<scroll-view id="scroll-container" class="scroll-hotel" 
		@touchcancel="touchEnd"
		@touchend="touchEnd"
		@scroll="scroll"
		:scroll-left="scrolls.scrollX"
		:scroll-with-animation="true"
		:scroll-x="true"
		:scroll-into-view="index"
	>
		<view style="width: 16rpx;display: inline-block;"></view>
		<view :id="`i${index}`" class="address-detail" v-for="(item,index) in hotelList" :key="index">
			<view :class="{mark:true, on:index == scrolls.activeIndex}" style="overflow: hidden;">
				<image :src="item.bg_img" mode="aspectFill"></image>
			</view>
			<view class="inner">
				<view class="address-detail-main">
					<view class="address-detail-main-left">
						<text class="title">{{item.name}}</text>
						<view class="content" :style="{opacity: item.label?1:0}">
							<template v-if="item.label">
								<text v-for="(v,k) in item.label.split(',')" :key="k">{{v}}</text>
							</template>
						</view>
						<view class="bottom" :style="{opacity: item.min_price?1:0}">
							<text class="bottom-left">￥</text>
							<text class="bottom-right">{{item.min_price}}起</text>
						</view>
					</view>
					<view class="address-detail-main-right" @click="$emit('goBook',index)">
						<text>预订</text>
					</view>
				</view>
				<view class="address-detail-position" v-if="item.distanceToMe">
					<image style="width: 18rpx;height: 22rpx;" src="/static/icon/address02.png" mode="">
					</image>
					<text style="margin-left:4rpx ;">{{item.distanceToMe}}km</text>
				</view>
			</view>
		</view>
		<view style="width: 16rpx;display: inline-block;"></view>
	</scroll-view>
</template>

<script>
	export default {
		name:"scroll-hotel",
		props:{
			hotelList:{
				type: Array,
				required: true
			},
			speed: {
				type: Number,
				default:2
			}
		},
		data(){
			return {
				target:"",
				scrolls:{
					r: 0,
					compensate: 0,
					screenWidth: 750,
					scrollX: -1,
					itemWidth: 512,
					isAppend: false,
					activeIndex:0,
				},
				move:{
					oldX: 0,
					direct: 0,
					isMove: false
				},
			}
		},
		computed:{
			scrollX(){
				return `translateX(${this.scrolls.scrollX}rpx)`;
			},
			totalWidth(){
				return this.hotelList.length*this.scrolls.itemWidth;
			},
			maxRight(){
				return -this.totalWidth + this.scrolls.itemWidth
			},
			activeIndex(){
				return Math.floor(this.scrolls.scrollX / this.scrolls.itemWidth)
			},
		},
		onReady(){
			uni.getSystemInfo({
				success: (res)=>{
					const r = res.screenWidth / 750;
					this.scrolls.r = r
					const rs = Math.ceil(r * 10)/10;
					this.scrolls.compensate = Math.abs(Math.floor((r - rs) * 100)/2);
				}
			});
		},
		methods:{
			touchStart(e){
				// this.move.oldX = e.touches[0].clientX;
			},
			scroll(e){
				const newScrollX = e.detail.scrollLeft / this.scrolls.r;
				const newIndex = Math.floor(((newScrollX + 750 + 50) / this.scrolls.itemWidth) - 1)
				if(this.scrolls.activeIndex == newIndex) return;
				this.scrolls.activeIndex = newIndex
				this.$emit('updateIndex', this.scrolls.activeIndex);
			},
			touchEnd(isUpdate){
				// this.scrolls.scrollX =( this.scrolls.activeIndex * this.scrolls.itemWidth - (750 - this.scrolls.itemWidth) / 2 ) + 'rpx'
					// if(current > 0){
					// 	this.scrolls.scrollX = 0;
					// }else if(this.hotelList.length<=1 && current < this.maxRight){
					// 	this.scrolls.scrollX = this.maxRight;
					// }else if(this.hotelList.length>1 && current < this.maxRight + (this.scrolls.screenWidth - this.scrolls.itemWidth-16)){
					// 	this.scrolls.scrollX = this.maxRight  + (this.scrolls.screenWidth - this.scrolls.itemWidth-16)
					// }else{
					// 	if(this.activeIndex == 0){
					// 		this.scrolls.scrollX = 0;
					// 	}else if(this.activeIndex == -(this.hotelList.length - 1)){
					// 		this.scrolls.scrollX = this.maxRight  + (this.scrolls.screenWidth - this.scrolls.itemWidth -16)
					// 	}else{
					// 		this.scrolls.scrollX = this.activeIndex * this.scrolls.itemWidth + (this.scrolls.screenWidth - this.scrolls.itemWidth)/2 - this.activeIndex*this.scrolls.compensate;
					// 	}
					// }
					// console.log(this.scrolls.scrollX)
					// isUpdate && this.$emit('updateIndex', -this.activeIndex);

			},
			setActiveIndex(index){
				this.scrolls.scrollX = ( index * this.scrolls.itemWidth - (750 - this.scrolls.itemWidth) / 2 ) + 'rpx'
				// this.touchEnd(false);
			},
			goBook(){
				
			}
		},
	}
</script>

<style scoped lang="scss">
	.scroll-hotel{
		width: 100%;
		height:318rpx;white-space: nowrap;
		transition: transform 5ms linear;
		
		.address-detail {
			display: inline-block;
			position: relative;
			flex: none;
			width:496rpx;
			height: 318rpx;
			border-radius: 10rpx;
			margin-right: 16rpx;
			overflow: hidden;

			&:last-child {
				margin-right: 0rpx;
			}

			.mark{
				height: inherit;
				width: inherit;
				overflow: hidden;
				border-radius: 10rpx;
				filter: contrast(0.5);
				transition: 0.3s all;
				
				image{
					// width: 100%;
					height: 318rpx;
					width: 690rpx;
					border-radius: 10rpx;
				}
				
				&.on{
					filter: contrast(1.2)!important;
				}
			}

			.inner {
				width: 100%;
				height: inherit;
				border-radius: 10rpx;
				position: absolute;
				z-index: 2;
				top: 0;
				left: 0;

				.address-detail-main {
					position: absolute;
					left: 0;
					bottom: 30rpx;
					width: 100%;
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					

					.address-detail-main-left {
						position: absolute;
						left: 20rpx;

						.title {
							font-size: 32rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.content {
							width: 100%;
							height: 64rpx;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							flex-wrap: nowrap;
							overflow: hidden;
							
							text{
								line-height: 36rpx;
								height: 36rpx;
								padding: 0 10rpx;
								/* padding: 4rpx 6rpx; */
								font-size: 22rpx;
								color: #ffffff;
								background: rgba(142, 160, 166, 0.6);
								border-radius: 17rpx;
								margin-right: 10rpx;
							}
						}
						

						.bottom {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.bottom-left {
								font-size: 24rpx;
								font-weight: bold;
								color: #ffffff;
								margin-right: 6rpx;
							}

							.bottom-right {
								font-size: 32rpx;
								font-weight: bold;
								color: #ffffff;
							}
						}
					}

					.address-detail-main-right {
						position: absolute;
						right: 24rpx;
						width: 120rpx;
						height: 44rpx;
						background: #FF6300;
						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08);
						border-radius: 22rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #ffffff;
						font-size: 28rpx;
					}

				}

				.address-detail-position {
					position: absolute;
					top: 22rpx;
					right: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					color: #FFFFFF;
					font-size: 20rpx;
				}
			}
		}
	}
</style>