小归海爱吃小海龟 2022-07-27 09:11 采纳率: 100%
浏览 52
已结题

微信小程序中,如何根据选择的结果显示图片?

目前在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
    })
  },
})

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-07-27 09:26
    关注

    你这个 你可以 把 图片的地址 和一些信息 组合成 数组。然后根据选中的值 过滤数组 。然后循环数组展示 。

    例如 伪代码如下

     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;
            })
        }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 8月4日
  • 已采纳回答 7月27日
  • 创建了问题 7月27日

悬赏问题

  • ¥50 易语言把MYSQL数据库中的数据添加至组合框
  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉,不会对a-b<-200mv有影响吗,就是接受时,对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构,轴与轴承是否发生了碰撞?
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况