在微信小程序中,使用滑动选择器设置本地图片宽度和高度,改变图片显示大小,图片显示在滑动选择器下方
时间: 2024-06-09 09:11:33 浏览: 86
微信小程序 slider双向滑动,范围选择,支持step,input输入数字slider跟随,柱状图展示价格区间热度,等等
可以通过以下步骤实现:
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;
}
```
这样就可以实现在微信小程序中使用滑动选择器设置本地图片宽度和高度,改变图片显示大小,并且图片显示在滑动选择器下方。
阅读全文