微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結果頁面

更新時間：2021年12月13日 09:55:32 作者：ZhangXD_BLOG

本文主要介紹了微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結果頁面，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

搜索頁面：

search.wxml頁面：

    <view class="form">
      <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="請輸入搜索關鍵字" type="text" />
    </view>

search.wxss樣式：

.form {
  position: relative;
  height: 40px;
}
 
.searchInput {
  border: 1px solid #2c3036;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 20px;
  color: #bebec4;
  padding-left: 35px;
}

search.js:

  // 搜索
  goSearch: function(e) {
    var that = this;
    var formData = e.detail.value;
    if (formData) {
 
      wx.request({
 
        url: 'https://xxxxx/homepage/search',
        data: {
          title: formData
        },
 
        header: {
          'Content-Type': 'application/json'
        },
        success: function(res) {
          that.setData({
            search: res.data,
          })
          if (res.data.msg=='無相關視頻'){
            wx.showToast({
              title: '無相關視頻',
              icon: 'none',
              duration: 1500
            })
          }else{
            let str = JSON.stringify(res.data.result.data);
            wx.navigateTo({
              url: '../searchShow/searchShow?data=' + str
            })
          }
          
          // console.log(res.data.msg)
        }
      })
    } else {
 
      wx.showToast({
        title: '輸入不能為空',
        icon: 'none',
        duration: 1500
      })
 
    }
  }

搜索結果：

searchShow.wxml頁面：

<view class="container">
  <view class="listBox" wx:for="{{searchShow}}" wx:key="{{item.id}}">
    <view class="listMain">
      <navigator url='../videoShow/videoShow?id={{item.id}}'>
        <image src="{{item.image}}" mode="widthFix"></image>
        <view class='listTitle'>
          <view class="listSubtitle">
            <text>{{item.title}}</text>
          </view>
          <view class="listText">
            <text>{{item.decription}}</text>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</view>

searchShow.js

  onLoad: function(options) {
    let searchShow = JSON.parse(options.data);
    let that = this
    that.setData({
      searchShow: searchShow
    })
    console.log(searchShow)
  },

到此這篇關于微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結果頁面的文章就介紹到這了,更多相關小程序?qū)崿F(xiàn)搜索并跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！?

您可能感興趣的文章: