目前在images文件里有若干张图片,我想在微信小程序中设置一个日期选择器和站点选择器,根据选择的日期与站点展示images里的不同文件。目前已经实现了选择器的设置(使用picker组件),但是关于图片的src应该怎么弄不太清楚,烦请各位赐教!
下面是选择器的设置
.wxml:
<view class="section">
<view class="section_title">站点</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section_title">日期</view>
<picker mode="date" value="{{date}}" start="2021-06-24" end="2021-08-15" bindchange="bindDateChange">
<view class="picker">
当前选择:{{date}}
</view>
</picker>
</view>
<view>
<image class="widget__arrow" src="/images/1.jpg" mode="aspectFill">
</image>
</view>
.js:
Page({
/**
* 页面的初始数据
*/
data: {
array:['S1','S2','S3'],
objectArray:[
{id:0, name:'S1'},
{id:1, name:'S2'},
{id:2, name:'S3'}],
index:0,
date:'2021-06-24'
},
bindPickerChange:function(e){
console.log('picker发送选择改变,携带值为',e.detail.value)
this.setData({
index:e.detail.value
})
},
bindDateChange:function(e){
console.log('picker发送选择改变,携带值为',e.detail.value)
this.setData({
date:e.detail.value
})
},
})
你这个 你可以 把 图片的地址 和一些信息 组合成 数组。然后根据选中的值 过滤数组 。然后循环数组展示 。
例如 伪代码如下
let arr=[
{
id:1,
name:"xxx",
src:"./images/xxx.png"
},
{
id:2,
name:"xxx2",
src:"./images/xxx2.png"
}
] ;
let date="9.20";
let zhandian="7";
if(data=="9.20" &&zhandian==7){
arr=arr.filter((item)=>{
return item.id==2;
})
}