• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 “万利商城”实战之九: 商品列表页的查询功能的实现 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

实现查询功能先在index.wxml中加入<input>标签并给<input>绑定一个事件,

然后针对事件编码就可以了。我们先在index.wxml文件中加入<input>标签 (见红色字体的代码):

 1 <view class="container">
 2  
 3 <view>
 4   <input class="input1" type="text" placeholder="请输入商品名称" 
       confirm-type="search" bindconfirm="bindSearch"
bindblur="searchBlue"></input> 5 </view> 6 7 <view class="list1" wx:for="{{productList}}" wx:key="produceId"> 8 <view> 9 <image class="image1" src="{{item.imageUrl}}"></image> 10 </view> 11 <view class="detail1"> 12 <text>{{index}} {{item.productName}}</text> 13 <text>{{item.price}}</text> 14 <text>{{item.originalPrice}}</text> 15 </view> 16 </view> 17 18 19 </view>
1 . class="input1" 设置样式 , input1在index.wxss中定义:
1 .input1
2 { 
3   width:600rpx;
4   height: 60rpx;
5   border-radius: 30rpx;
6   background-color: #e0e0e0;
7   padding-left: 30rpx;
8 }
width:600rpx; 输入框的宽度,height: 60rpx; 输入框高度,background-color: #e0e0e0;输入框背景色,
border-radius: 30rpx;输入框以圆角显示,这个值设置成height值的一半就是圆角的效果,
padding-left: 30rpx; 文字离左边框的距离, 和border-radius的值保持一致会比较美观。

2 . placeholder="请输入商品名称" , 输入框的提示信息,如下图 :

3 . confirm-type="search" 用来设置当用户在输入框输入文字时,
键盘右下角的按钮显示什么文字, search表示搜索,如下图 :

其他可选的值如下表 :


4 . bindconfirm="bindSearch" 表示用户点键盘上的“搜索”按钮时要执行的函数,
稍后我们将在index.js中加入名称为“bindSearch”的函数并编码来完成搜索的执行逻辑。

  5 . bindblur="searchBlue" 表示输入框失去焦点时要执行的函数,这个函数的作用是将用户

输入的值赋给data:{ searchWords:"" }属性中定义的searchWords变量,

这样在index.js文件中其他地方就可以直接使用这个变量的值了。

 

<input>标签的详细信息可以参考官方文档 :

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

 

index.js中的代码实现:

 1   data: {
 2     productList: [],
 3     pageIndex:1,
 4     searchWords:""
 5   },
 6  
 7   searchBlur:function(e)
 8   {
 9     this.setData({
10       searchWords: e.detail.value
11     })
12   },
13   bindSearch: function (options) { 
14     this.initProductList();
15   },

 1 . 我们在data属性中定义一个存储用户输入的变量 searchWords:""。

 2 . searchBlur:function(e){ } 函数在输入框失去焦点时触发,

此函数的作用是将输入框的值通过setData( )函数设置到searchWords变量中供其他地方调用。

 3 . bindSearch: function (options) { }函数用来响应用户的查询操作,

当用户输入完成点右下角的搜索按钮后触发该函数,

此函数只是简单的调用了initProductList();函数用来向服务器抓取数据并在页面显示出来,

为了抓取数据时将用户输入的查询条件传过去,我们需要对initProductList();函数做少许修改如下 :

 1   initProductList:function()
 2   {
 3     var _this=this;
 4     wx.request({
 5       url: \'http://www.tm.com/webapi/products\',
 6       data:{\'words\':this.data.searchWords},
 7       method:\'GET\',
 8       success:function(res){
 9         //var products=res.data;
10         var products=[
11           {\'productId\':111,\'productName\':\'女装T恤简洁11\',\'price\':12.9,\'originalPrice\':22.9,\'imageUrl\':\'../../images/product11.jpg\'},
12           {\'productId\':122,\'productName\':\'女装T恤简洁22\',\'price\':15.9,\'originalPrice\':25.9,\'imageUrl\':\'../../images/product22.jpg\'},
13           {\'productId\':133,\'productName\':\'女装T恤简洁33\',\'price\':18.9,\'originalPrice\':38.9,\'imageUrl\':\'../../images/product33.jpg\'},
14           {\'productId\':144,\'productName\':\'女装T恤简洁44\',\'price\':18.9,\'originalPrice\':38.9,\'imageUrl\':\'../../images/product44.jpg\'}
15         ];
16         _this.setData({productList:products});
17       }
18     })
19   },

相比较原来的initProductList();函数,这里仅仅加入了\'searchWords\':this.data.searchWords 一行代码,

其作用是将searchBlur:function(e){ }函数体中赋值给searchWords的值抓出来,然后赋值给查询字符串变量words

用URL的形式传递到服务器端, 服务器端需要用Request.QueryString["words"]接收这个值,

当然有了这个值还需要传递给SQL语句做where条件,这部分就属于服务器端的编码了。

 

至此, 我们已将首页的基本功能都实现了, 包括显示首页商品清单,查询商品,下拉刷新,上拉分页加载商品信息等。

接下来我们介绍首页的余下几个功能:

1 . 将商品加入到购物车 ;

2 . 点击商品图片打开详情页;

3 . 详情页可以分享商品信息给朋友或发到朋友圈;

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap