luckan1 2021-02-04 17:34 采纳率: 100%
浏览 387
已结题

小程序滑动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>
  • 写回答

1条回答 默认 最新

  • 天际的海浪 2021-02-04 21:06
    关注

    给你写个例子。参考下

    <!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 LD衰减图用R语言对其可视化
  • ¥15 Mermaid语法生成的svg在Axure无法编辑
  • ¥15 Windchill二次开发
  • ¥15 怎么把tkinter和其他代码结合起来使功能可以完善
  • ¥15 爬取豆瓣电影相关处理
  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图