小程序滑动scale实时缩放效果
现在是这种状态 只能选中的时候给出固定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>
给你写个例子。参考下
<!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>