小程序滑动scale实时缩放效果

Question

 

现在是这种状态 只能选中的时候给出固定scale数值

 

下面的是目标效果，transform:scale的值通过滑动获取，scale应该怎么算出来每个宝贝偏移值呢？新手 求大佬解答！

能帮着改好就更好了！

.main {
	width: 100%;
	height: 1190rpx;
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.scroll-view {
	width: 100%;
	text-align: center;
	display: flex;
	white-space: nowrap;
}

.scroll_item {
	flex-shrink: 0;
	margin-right: 20rpx;
	/* transform: scale(0.9); */
	transition-duration: 200ms;
	height: 800rpx;
}
.scroll_item .test{
  font-size: 40rpx; color: #fff;
}



.selected {
	/* transform: scale(1); */
	transition-duration: 200ms;
}


.scroll_item .image {
	width: 500rpx;
	height: 680rpx;
}

.slide {
	height: 30rpx;
	width: 100%;
	margin-top: 60rpx;
}

.slide .slide-bar {
	width: 340rpx;
	margin: 0 auto;
	height: 4px;
	background: #fff;
	border-radius: 8rpx;
}

.slide .slide-bar .slide-show {
	height: 100%;
	/* transition: all 0.1s linear; */
	background-color: #aa1018;
	border-radius: 8rpx;
}

import {
	enhanceComponent
} from 'tb-shop-enhance';

var startPoint;
Component(enhanceComponent({
	data: {
    slideWidth: '',
    move:'',
		slideLeft: 0,
		itemWidth: '',
		barWidth: '',
		active: '',
		close: '',
		imageArr: [
      { 
        selected:true,
        scale:1,
				image: "https://img.alicdn.com/imgextra/i4/749597675/O1CN01wrPtyl26ZCSjq8MZs_!!749597675.png",
        price: "589.00"
        
			},
			{
        scale:0.86,
				image: "https://img.alicdn.com/imgextra/i4/749597675/O1CN01wrPtyl26ZCSjq8MZs_!!749597675.png",
				price: "125.00"
			},
			
			{
        scale:0.86,
				image: "https://img.alicdn.com/imgextra/i4/749597675/O1CN01wrPtyl26ZCSjq8MZs_!!749597675.png",
				price: "148.00"
			},
			{
        scale:0.86,
				image: "https://img.alicdn.com/imgextra/i2/1867852664/O1CN015ws3PN1VY9lPmE8d3_!!1867852664.png",
				price: "699.00"
			},
			{
        scale:0.86,
				image: "https://img.alicdn.com/imgextra/i4/749597675/O1CN01wrPtyl26ZCSjq8MZs_!!749597675.png",
				price: "149.00"
      },
      {
        scale:0.86,
				image: "https://img.alicdn.com/imgextra/i4/749597675/O1CN01wrPtyl26ZCSjq8MZs_!!749597675.png",
				price: "149.00"
			},
    
      
		],
	
	},
	onInit() {

		this.getSystemInfo()
		this.getRatio()
	},
	didMount() {

		const {
			gdc = {}, mds = {}, modUtils
		} = this.props.data;

		this.setData({
			bannerArray: mds.moduleData.banner_array,
		});
	},
	methods: {
		getSystemInfo() {
			my.getSystemInfo({
				success: (app) => {
					this.setData({
						windowWidth: app.windowWidth, 
					})
				}
			})

		},

		getRatio() {
			var datas = this.data.imageArr;
			var _barWidth = datas.length * (600) + (datas.length * 0.86); 
			var _showLength = 750 / _barWidth * (600) + 6; //
			this.setData({
				barWidth: _barWidth,
				slideWidth: parseInt(_showLength),
			})
		},




		getSelectItem: function(e) {
			var itemWidth = e.detail.scrollWidth / this.data.imageArr.length; 
			var scrollLeft = e.detail.scrollLeft; 
			var curIndex = Math.round(scrollLeft / itemWidth); 
			var _bar = 340 / this.data.barWidth * (750 / this.data.windowWidth); 
			for (var i = 0, len = this.data.imageArr.length; i < len; ++i) {
        this.data.imageArr[i].selected = false;

         this.data.imageArr[i].scale = 0.86; 
         console.log(scrollLeft)
          
     
        
			}
      this.data.imageArr[curIndex].selected = true;
      this.data.imageArr[curIndex].scale = 1;
			this.setData({
				imageArr: this.data.imageArr,
				itemWidth: itemWidth,
				scrollLeft: scrollLeft,
				slideLeft: parseInt(e.detail.scrollLeft * _bar), //scrollLeft滑动的数值
			});
		},
		

		touchStart(e) {
			this.setData({
				startPageX: e.changedTouches[0].pageX,
			});
		},

		touchMove(e) {
			let _this = this;
			let pageX = e.changedTouches[0].pageX;
			let move = pageX - _this.data.startPageX; //正数，向右滑动；负数，向左滑动
      //向右滑
      
			if (move < 0) {
     
          
         
			} else {
				
      }
      
       _this.setData({
                
              });
              
		},

		touchEnd(e) {
			this.setData({
				startPageX: e.changedTouches[0].pageX,
			});

		},

	}
}));

<view class="main">
	<scroll-view onTouchStart="touchStart" onTouchMove="touchMove" onTouchEnd="touchEnd" class="scroll-view" scroll-x
 onScroll="getSelectItem">
		<block a:for="{{imageArr}}" a:key="unique" a:for-index="id" a:for-item="item">
			<view style="transform: scale({{item.scale}})" class="scroll_item" data-index='{{item.index}}'>
		
       	<image class="image" mode="aspectFill" src="{{item.image}}" />
         <view class="test">
           	 {{item.scale}}
         </view>
			</view>
		</block>
	</scroll-view>
	<view class='slide'>
		<view class='slide-bar'>
    
			<view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft+'rpx'}};">
      </view>
		</view>
   
	</view>
</view>

Answer 1

给你写个例子。参考下

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#scrolldiv {
	border: 3px solid #999;
	width: 400px;
	height: 400px;
	background-color: #ccc;
	display: flex;
	overflow-x: scroll;
}
#scrolldiv div .item {
	width: 200px;
	height: 300px;
	background-color: #f66;
	margin: 5px;
	transform: scale(0.86);
}
</style>
</head>
<body>
<div id="scrolldiv">
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
	<div><div class="item"></div></div>
</div>
<script type="text/javascript">
var scrolldiv = document.querySelector("#scrolldiv");
var items = scrolldiv.querySelectorAll(".item");
scrolldiv.onscroll = function () {
	var itemWidth = scrolldiv.scrollWidth / items.length;
	var scrollLeft = scrolldiv.scrollLeft;
	var clientWidth = scrolldiv.clientWidth;
	for (var i = 0, len = items.length; i < len; i++) {
		var x = scrollLeft+clientWidth/2 - itemWidth*i-itemWidth/2;
		var scale = Math.max(1 - Math.abs(x) / itemWidth * 0.14, 0.86);
		items[i].style.transform = "scale("+scale+")";
	}
}
</script>
</body>
</html>