根据滑动改变view的大小和位置

需求描述

最近项目中有这样一个需求,页面有titlebar和scrollowview两部分,在titlebar的下边有一个头像,随着scrollowview的滑动,头像要缩放到固定大小然后停留在titlebar上不动了。

问题分析

首先这个需求并不陌生,类似于悬浮按钮。但是不同的是有缩放。如果将这个图片放在scrollview中的话,随着scrollview的滑动,图片是从titlebar的下边走了,被titlebar遮盖了。所以说我们要把图片放在和titlebae,scrollview平级的位置上。通过对scrollowview的changelistener的监听来改变图片的位置和大小。

代码实现

投机取巧,通过改变padding的方式来改变view的位置和大小

scrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if(top <=0){
                    top = rl_userhead.getPaddingTop();
                    bottom = rl_userhead.getPaddingBottom();
                    right = rl_userhead.getPaddingRight();
                    titleHeight = DensityUtil.dip2px(MainActivity.this,44);
                    small_top = DensityUtil.dip2px(MainActivity.this,9);
                    small_bottom = DensityUtil.dip2px(MainActivity.this,55);
                    small_right = DensityUtil.dip2px(MainActivity.this,21);
                }
                Log.e("输出y:",String.valueOf(scrollY));
                Log.e("输出:",String.valueOf(scrollY/44.0));

                if(scrollY<=0){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),top,right,bottom);
                }else if(scrollY>0 && scrollY<titleHeight){
                    rl_userhead.setPadding(rl_userhead.getPaddingLeft(),(int)(top-scrollY/44*35.0),(int)(right+ scrollY
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤实现: 1. 在wxml中添加一个滑动选择器和一个图片组件,如下所示: ``` <view class="container"> <picker mode="multiSelector" bindchange="bindSizeChange"> <view class="picker"> <view class="picker-text">{{widths[selectedWidthIndex]}} * {{heights[selectedHeightIndex]}}</view> </view> <picker-view class="picker-view" indicator-style="height: 50rpx;" indicator-class="picker-indicator" style="width: 100%;"> <picker-view-column> <view class="picker-item" wx:for="{{widths}}" wx:key="index">{{item}}</view> </picker-view-column> <picker-view-column> <view class="picker-item" wx:for="{{heights}}" wx:key="index">{{item}}</view> </picker-view-column> </picker-view> </picker> <image src="{{imageSrc}}" mode="aspectFit" style="width: {{width}}px; height: {{height}}px;"></image> </view> ``` 2. 在js文件中定义滑动选择器的选项和初始值,以及绑定滑动选择器值变化的事件,如下所示: ``` Page({ data: { widths: [100, 200, 300, 400, 500], heights: [100, 200, 300, 400, 500], selectedWidthIndex: 0, selectedHeightIndex: 0, width: 100, height: 100, imageSrc: 'https://example.com/image.png' }, bindSizeChange: function(e) { var values = e.detail.value; var width = this.data.widths[values[0]]; var height = this.data.heights[values[1]]; this.setData({ selectedWidthIndex: values[0], selectedHeightIndex: values[1], width: width, height: height }); } }) ``` 3. 在wxss文件中定义样式,如下所示: ``` .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-size: 32rpx; } .picker { margin-bottom: 20rpx; } .picker-text { color: #999; } .picker-view { width: 100%; height: 200rpx; } .picker-item { line-height: 50rpx; text-align: center; } .picker-indicator { background-color: #f8f8f8; } .image { margin-top: 20rpx; } ``` 这样就可以实现在微信小程序中使用滑动选择器设置本地图片宽度和高度,改变图片显示大小,并且图片显示在滑动选择器下方。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值