微信小程序双向slider加背景图展示
时间: 2023-06-17 16:05:05 浏览: 60
可以使用微信小程序的 `slider` 组件和 `image` 组件来实现双向 slider 加背景图展示的效果。
首先,需要在 `wxml` 文件中添加 `slider` 和 `image` 组件,代码如下:
```html
<view class="container">
<image class="background" src="{{backgroundUrl}}"></image>
<slider class="slider" value="{{value1}}" min="{{min}}" max="{{max}}" bindchange="onChange"></slider>
<slider class="slider" value="{{value2}}" min="{{min}}" max="{{max}}" bindchange="onChange"></slider>
</view>
```
其中 `background` 类设置背景图的样式,`slider` 类设置 slider 的样式。
然后,在 `js` 文件中定义 `data`,并在 `onLoad` 函数中设置背景图:
```javascript
Page({
data: {
backgroundUrl: '/images/background.jpg',
value1: 20,
value2: 80,
min: 0,
max: 100,
},
onLoad: function () {
wx.getImageInfo({
src: this.data.backgroundUrl,
success: (res) => {
this.setData({
backgroundWidth: res.width,
backgroundHeight: res.height,
})
},
})
},
onChange: function (event) {
const { value } = event.detail
const { dataset } = event.currentTarget
const { index } = dataset
if (index === '1') {
this.setData({
value1: value,
})
} else {
this.setData({
value2: value,
})
}
},
})
```
在 `onChange` 函数中,通过 `dataset` 获取 slider 的索引,然后根据索引更新对应的 `value`。
最后,在 `wxss` 文件中设置样式:
```css
.container {
position: relative;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.slider {
position: absolute;
width: 80%;
left: 10%;
z-index: 1;
}
```
其中,`background` 样式设置背景图的样式,`slider` 样式设置 slider 的样式,并通过 `z-index` 属性设置层级关系,保证 slider 在背景图上方。