微信小程序之搜索分页功能的实现代码

直接上代码:
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({
 /**
  * 页面的初始数据
  */
 data: {
  pageName: "",
  ShowLonding: { londing: false, message: "", contNone: false },
  ...menuData.data,
  ...proData.pageData
 },
 ...menuData.Methods,
 ...proData.methods,

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 /*  wx.showLoading({
   title: '正在加载...',
  });
  setTimeout(()=>{
   wx.stopPullDownRefresh,
   wx.hideLoading();
  },2000) */
 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
  /* wx.showToast({
   title: '没有更多数据',
  }) */
  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;//页数默认为1
var methods = {
   //分页
 getHttpProductMore: function () {
  var self = this;
  if (ispage) {
   ispage = false;//没有下一页ispage 赋值为false
   indexpage++; //页数加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("更多的数据",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('搜索的数据',searchData);
     let that=this
     let clickEnter=1
     httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId=1").then(function(r){
      wx.hideLoading();
      //console.log("搜索数据",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

}

总结

到此这篇关于微信小程序之搜索分页功能的实现代码的文章就介绍到这了,更多相关小程序搜索分页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序实现搜索功能并跳转搜索结果页面

    本文实例为大家分享了微信小程序实现搜索功能,并跳转搜索结果页面,供大家参考,具体内容如下 搜索页面: search.wxml页面: <view class="form"> <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" /> </view

  • 微信小程序实现移动端滑动分页效果(ajax)

    一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面. 实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面. /* *<div class='topicBox' id='listBox'> *</div> */ //判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see = document.documentElemen

  • 微信小程序实现搜索功能

    在页面search.wxml中,定义一个input输入框以及搜索的点击按钮,分别为它们绑定点击事件handleInputChange()和handleSearch()的事件,同时在它们的下面定义搜索的列表,代码如下所示: <view class="search-header"> <input class="search-input" bindtap="handleInputChange" /> <view class

  • 微信小程序模板之分页滑动栏

    本文实例为大家分享了微信小程序分页滑动栏的具体代码,供大家参考,具体内容如下 功能: 1.分页栏与滑动视图绑定 2.点击分页栏自动滑动到对应视图 3.滑动的到视图对应分页栏自动显示选中样式 效果图 上代码 wxml <view class="tapNav"> <view class="{{tabArr.tabCurrentIndex==0?'active':''}}" data-index="0" bindtap="v

  • 微信小程序分页加载的实例代码

    整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享. 分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验.那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能.照例先上源码及效果图. 源码传送门 要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条

  • 微信小程序 搜索框组件代码实例

    这篇文章主要介绍了微信小程序 搜索框组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon>

  • 小程序实现搜索框功能

    本文实例为大家分享了小程序实现搜索框功能的具体代码,供大家参考,具体内容如下 实现效果图: xxx.wxml <!--搜索框 --> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <!--点击之后,出现input框 --> <view class="weui-search-bar__box"> &l

  • 小程序实现搜索框

    小程序中搜索框的简单实现,供大家参考,具体内容如下 搜索框 搜索框无论是在电商网站还是小程序中是很常见的,那么在小程序中是如何实现的呢,我们一起来看看吧(过程遇到很多问题). 思路 在搜索框中输入关键词时,应该会向服务器发送请求,因为没有相关接口,所以我就模拟数据啦,用文档中API中的setStorage和getStorage在本地存储数据和读取数据,在搜索框中输入时若能匹配到则显示,若匹配不到,则显示"没有数据". 模糊搜索 search.wxml <!--pages/sear

  • 微信小程序之搜索分页功能的实现代码

    直接上代码: wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"&g

  • 微信小程序实现搜索框功能

    本文实例为大家分享了微信小程序实现搜索框功能的具体代码,供大家参考,具体内容如下 效果: wxml文件: <view class="search_input" > <navigator url="/pages/search/search" open-type="navigate" class="navigator"> <text class="iconfont icon-guanbi&q

  • 微信小程序实现搜索框功能及踩过的坑

    先上代码: wxml: <!-- 顶部搜索框 --> <view class="inputcontainer"> <view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}">搜索商品</view> <view class="edit" wx:else> <form bi

  • 微信小程序实现拨打电话功能的示例代码

    1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法 例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号

  • 微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

  • 微信小程序实现搜索关键词高亮的示例代码

    1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接. 2,思路 博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常.由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下. 3,代码逻辑 模拟数据如下 list:[ '武汉大学', '华中科技

  • 微信小程序实现发微博功能的示例代码

    跳转页面发状态消息,是一个很常见的功能,功能截图如下: 具体实现,这个功能涉及到了page传递参数功能,那么今天就仔细探究一下如何实现 首先,这个功能涉及两个页面,分别为top和list 先看list页面,即图片1和图片4,该页面的布局如下 <!--pages/weibo/list/list.wxml--> <view>这是第一条微博</view> <view wx:for = "{{weibos}}"> {{item}} </vi

  • 微信小程序实现发动态功能的示例代码

    目录 一.设计所需要的表 1.文章表 2.评论表 3.点赞表 二.发布动态 1.文本区 2.最终发表动态效果 3.发布动态代码 最近做了一个校园拍卖小程序,想在里面添加一个类似校园圈功能,现在来一步一步实现. 一.设计所需要的表 1.文章表 文章表很简单,就类似朋友圈,一个文字内容,一个图片数组 2.评论表 3.点赞表 二.发布动态 1.文本区 光标有点问题,回车换行时光标和文字被埋在下面了 解决,给textarea设置一个最大高度,max-length,把scroll-view改为view ,

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

  • 微信小程序实现搜索历史功能

    结合了微信给的资料,马马虎虎摸索出了一些东西,下面说下一下微信小程里序搜索历史功能的实现,下图是实现效果. 首先,定义历史记录的显示风格和方式,在下用的是列表模式,没有使用什么比较酷炫的套路. <view wx:for="{{sercherStorage}}" wx:key="item.id"> <view class="liclass" style="color:#9E9E9E;border-bottom:0;fon

随机推荐