Me Hotel 2022-06-02 03:34 采纳率: 100%
浏览 200
已结题

如何能够实现搜索然后根据搜索的特定内容跳转到指定图片

自学编程,想要通过搜索跳转到图片,但是无法实现,看了很多教程依然无法处理

首先这个是全局的样子

img

接下来是index1.js的代码

// pages/index1/index1.js
Page({
    data: {
      // value: ""
    },
    search(){
      //wx.navigateTo跳转页面方法
      if (this.data.value){
        wx.navigateTo({
          url: `/pages/index2/index2?value=${this.data.value}`,
        })
      }else{
        wx.showToast({
          title: "请输入需要查询的名称",
          icon: "none",        //加载旋转icon 可填:loading
          duration: 3000,    //弹窗显示时间
        });
      }
    },
    record(e){
      this.data.value = e.detail.value
    }
  })

然后是index1.json代码


{
    "component": true,
    "usingComponents": {},
    "navigationStyle": "custom"
  }

接下来是index1.html代码


<view class="title">信息搜索</view>
<view class='sous'>
  <view class="btn" bindtap='search'>搜索</view>
  <!-- bindinput:键盘输入时触发  bindconfirm:按下键盘完成按钮时触发 -->
  <input class='input' bindinput="record" bindconfirm="search"></input>
</view>

然后是index1.wxss代码


background: linear-gradient(to bottom right,#f829ff, #09cff7)
  }
  .title{
    margin-top: 30vh;
    padding-bottom: 20px; 
    color: #fff;
    font-size: 40px;
    text-align: center;
  }
  .sous{
    width: 80vw;
    height: 30px;
    margin: auto;
    border-radius: 15px; 
    border: 1px solid #fff;
  }
  .btn{
    float: right;
    width: 20vw;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #fff;
    color: #fff;
    text-align: center;
    font-size: 1rem;
    box-sizing: border-box;
  }
  .input{
    width: 60vw;
    height: 30px;
    padding-left: 1rem; 
    color: #fff;
    box-sizing: border-box;
  }

```page{
    
  
第一个文档代码结束,接下来是index2代码

index2.js代码


```javascript

Page({
    data: {
      value: "../img/pkq.png",  //存放需要查询的内容
      picList: [] //存放图片数据
    },
    //onLoad生命周期函数 options:跳转传递过来的value参数
    onLoad: function (options){
      if (options.value){
        this.data.value = options.value;  //数据不需要渲染页面就不必this.setData
      }
      wx.showLoading({
        title: '加载中',
      }),
      //请求 后台 服务器发送请求获取数据
      wx.request({
        url: `../img/pkq.png`,//请求地址
        success:(res)=>{  //请求成功的回调
          this.setData({
            picList: res.data.data
          })
          wx.hideLoading()
        },
        fail(){  //请求失败的回调
          //uni.showToast弹窗
          wx.showToast({
            title: "当前网络不给力,请检查网络设置",
            icon: "loading",        //加载旋转icon 可填:loading
            duration: 3000,    //弹窗显示时间
          });
        },
        complete() { //请求无论成功与失败都会执行的回调
  
        }
      })
    },
    //点击图片预览
    preview(e){
      //图片浏览方法
      wx.previewImage({
        urls: this.data.picList.map(i=>i.middleURL),
        current: e.target.dataset.src
      })
    },
    //点击按钮下载图片
    download(e){
      let url = e.currentTarget.dataset.src
      //将图片下载
      wx.downloadFile({
        url: url,
        success(res) {
          //将图片保存到图库
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
          })
        }
      })
    }
  })

index2.json代码


{
    "navigationBarTitleText": "信息",
    "usingComponents": {},
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true
  }

index2.wxml代码


<view class='list-item' wx:for="{{picList}}">
  <view>
    <!-- bindtap设置点击事件 lazy-load='true'开启懒加载 data-src设置data的src属性 -->
    <image bindtap='preview' mode="widthFix" src="{{item.middleURL}}" 
    lazy-load='true' data-src="{{item.middleURL}}"></image>
    <view class='download' data-src="{{item.middleURL}}" bindtap='download'>
      <image src='../img/jxj.jpg'></image>
    </view>
  </view>
</view>

index2.wxss代码


/* pages/index2/index2.wxss */
.list-item{
    position: relative;
  }
  image{
    width: 100vw;
  }
  .download{
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 100rpx;
    height:100rpx;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 #777;
  }
  .download>image{
    width: 80rpx;
    height:80rpx;
    margin: 10rpx;
  }

运行结果如下:

img

只是想要达到搜索,然后显示库存当中的图片,发现好难啊,大家帮帮忙

  • 写回答

12条回答 默认 最新

  • 言程序plus 2022-06-02 14:05
    关注

    作为一名专业的前端开发来帮你分析一下问题:
    page1跳转page2的逻辑都没问题,只在在请求这里没有处理清楚

    img


    这里就涉及到一个问题了,这边前端开发工作已经完成了,只是后台这一块工作还没完成:
    两种解决方案:
    方案一:不需要后台交互,前端模拟数据,在index2目录下,建一个serve.json

    onLoad: function (options){
          if (options.value){
            this.data.value = options.value;  //数据不需要渲染页面就不必this.setData
          }
          wx.showLoading({
            title: '加载中',
          }),
      
          //请求 后台 服务器发送请求获取数据
          wx.request({
            url: `./serve.json`,//请求地址改成你新建的这个文件路径
            success:(res)=>{  //请求成功的回调
              this.setData({
                picList: res.data.data
              })
              wx.hideLoading()
            },
            fail(){  //请求失败的回调
              //uni.showToast弹窗
              wx.showToast({
                title: "当前网络不给力,请检查网络设置",
                icon: "loading",        //加载旋转icon 可填:loading
                duration: 3000,    //弹窗显示时间
              });
            },
            complete() { //请求无论成功与失败都会执行的回调
            
            }
          })
        },
        //点
    
    

    serve.json里面的内容按你需求来定, 作为一个模拟的后台返回数据,你请求后得到的就是这个结果

    {
      "code": 200,
      "data": "https://img-mid.csdnimg.cn/release/static/image/mid/ask/317092031456182.png?%ra=link"
    }
    
    

    方案二:你想写后台,但是又不知道怎么写后台;
    找一个模拟后台返回接口的网站,把你需要后台返回的结果,填写进去,访问那个接口
    也可以实现,前后台联动的效果,看看你希望采取哪个方案
    方案三:老老实实建数据库,写后台接口

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(11条)

报告相同问题?

问题事件

  • 系统已结题 6月10日
  • 已采纳回答 6月2日
  • 赞助了问题酬金50元 6月2日
  • 赞助了问题酬金30元 6月2日
  • 展开全部

悬赏问题

  • ¥20 firefly-rk3399上启动卡住了
  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器