快捷導(dǎo)航

微信小程序之搜索分頁功能的實現(xiàn)代碼

更新時間：2020年06月22日 16:54:45 作者：冷冷zz

這篇文章主要介紹了微信小程序之搜索分頁功能的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

直接上代碼：
wxml:

<wxs src="../wxs/changeimg.wxs" module="changeimg" />
<view class="container">
  <view class="search_input">
     <image class="back" src="" mode="widthFix"></image>
     <input type="text" class="weui-input" maxlength="10" placeholder="搜索" value="{{value}}" bindinput="changeModel" bindconfirm="search" data-key="value"/>
 <image class="scan_code" src="" mode="widthFix" ></image>
</view> 
<!--搜索菜品做法列表 -->
<view class="modus_operandi">
<view class="search_no" wx:if="{{searchLen==0&&clickEnter==1}}" >
 <text>很抱歉,沒有找到您要搜索的資料/(ㄒoㄒ)/~~</text>
</view>
 <view class="modus_operandi_total"
 wx:for="{{searchData}}"
 wx:key="id"
 bindtap="jumpVegetables"
 data-cid="{{item.classid}}"
 >
  <image class="modus_operandi_pic" mode="widthFix" src="{{changeimg.getimageurl(item.defaultpic)}}"></image>
  <view class="modus_operandi_title">{{item.title}}</view>
 </view>
</view>
</view>

wxss:

page{
  background: #fff;
}
.back{
  width: 20rpx;
  height: 20rpx;
  margin-top: 39rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.search_input {
  height: 110rpx;
  padding: 10rpx;
  background: url("https://mini.qianjiwang.cn/img/top.png")no-repeat center;
  background-size: 100% 700rpx;
  display: flex;
  position: relative;
 }
 .search_input input {
 height: 70rpx;
 background-color: #fff;
 border-radius: 50rpx;
 font-size: 32rpx;
 color: #000;
 width: 80%;
 margin-left: 0rpx;
 background: #a7d9fe;
 margin-top: 20rpx;
 padding-left: 30rpx;
 }
 .scan_code{
   flex: 1;
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
  margin-top: 27rpx;
  
}
.modus_operandi{
  padding: 20rpx;
  display: flex;
  flex-wrap: wrap; 
  margin-top: 50rpx;
 }
 .modus_operandi_total{
  width: 47%;
  padding: 10rpx;
 }
 .modus_operandi_pic{
  height:215rpx!important;
  border-radius: 10rpx;
 }
 .modus_operandi_title{
  text-align: center;
 }

js:

// pages/pro/index.js
import menuData from "../../bindData/rightMenuCtrl.js"
import proData from "../../bindData/searchFoodData.js"
Page({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  pageName: "",
  ShowLonding: { londing: false, message: "", contNone: false },
  ...menuData.data,
  ...proData.pageData
 },
 ...menuData.Methods,
 ...proData.methods,

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {

  
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {

 },

 /**
  * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 /*  wx.showLoading({
   title: '正在加載...',
  });
  setTimeout(()=>{
   wx.stopPullDownRefresh,
   wx.hideLoading();
  },2000) */
 },

 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
  /* wx.showToast({
   title: '沒有更多數(shù)據(jù)',
  }) */
  let that =this
  that.getHttpProductMore();
 },

 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function () {

 }
})

searchFoodData.js:

var httpClient = require('../utils/HttpClient.js');
var tools = require('../utils/util.js');
import url from "../utils/apiUrl.js"
var pageData = {
  inputValue:{},
  searchData:{},
  searchLen:'',
  clickEnter:'0',
};
var ispage = true;
var indexpage = 1;//頁數(shù)默認為1
var methods = {
   //分頁
 getHttpProductMore: function () {
  var self = this;
  if (ispage) {
   ispage = false;//沒有下一頁ispage 賦值為false
   indexpage++; //頁數(shù)加1
   let searchData= this.data.inputValue.value//獲取輸入框的值
   //console.log('頁',indexpage);
   wx.showLoading({
    title: '正在加載...',
   });
   httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId="+indexpage).then(function (o) {
     //console.log("更多的數(shù)據(jù)",o);
    if (o.length > 0) {//如果長度大于0，使用concat連接起來，ispage賦值為true
     var tempData = self.data.searchData;
     tempData = tempData.concat(o)
     self.setData({ searchData: tempData })
     ispage = true;
     wx.hideLoading()
    }
    else {
     wx.showToast({
      title: '沒有更多了',
     });
     indexpage = 1;
    }
   });
  }
 },
  search(e){
    ispage = true
    wx.showLoading({
      title: '正在加載...',
     });
     let searchData= this.data.inputValue.value
     console.log('搜索的數(shù)據(jù)',searchData);
     let that=this
     let clickEnter=1
     httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId=1").then(function(r){
      wx.hideLoading();
      //console.log("搜索數(shù)據(jù)",r);
      let searchData=r
      let searchLen=r.length
      that.setData({
       searchData,
       searchLen,
       clickEnter
      })
     })
  } ,
  changeModel(e){
    let data={};
    data[e.currentTarget.dataset.key] = e.detail.value
    this.setData({
      inputValue:data
    })
    //console.log(data);
    // console.log('data',this.data.inputValue);
  } ,
  jumpVegetables(e){
   const {cid}=e.currentTarget.dataset
   wx.navigateTo({
    url: '/pages/vegetable-index/vegetable-index?cid='+cid,
    success: (result)=>{
     
    },
   });
  }
}

module.exports = {
 pageData: pageData,
 methods: methods

}

總結(jié)

到此這篇關(guān)于微信小程序之搜索分頁功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)小程序搜索分頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: