小程序教程3

开发搜索页和跳转后的列表页

小程序地址，点击这里

搜索页

1. 搜索列表页有几个小功能要注意下，一个是在搜索框中有字的时候右边的按钮显示的是搜索，如果里面没有字的话显示的是取消，如果点击取消的话返回首页，如果点击的是搜索的话需要进入搜索列表页。

2. 点击清除按钮就将历史搜索下的记录给清除掉。点击换一批案例说是将下面的标签都给更换掉，但是这里暂时不对这个功能进行处理。

3. 正常的页面布局在这里就不赘述了，详细的在github上有代码，主要讲一下需要注意的点。

4. 首先说下右边按钮的处理，功能是在搜索框有字的时候显示搜索并且变成红色按钮，在搜索框没有文字的时候显示取消变成灰色按钮，搜索时候点击进入商品列表页面，点击取消按钮的时候返回到京东首页。

       <input placeholder="搜索京东商品" type="text" bindinput="keyinput"/>
       <icon type="search" size="16" color="#afafb1"></icon>
       <button size="mini" id="{{searchContent?'搜索':'取消'}}" bindtap="search" class="{{searchContent?'btn-search':''}}">{{searchContent?'搜索':'取消'}}</button>
   

   • 在js的data中定义一个searchContent变量，初始值为undefined，并且给搜索框绑定一个keyinput方法，当输入框的文字发生变化的时候会触发，这个方法只处理一件事，就是吧输入框中的值赋给刚刚定义的searchContent。

   • 同时使用小程序的模板语法动态的设置按钮的id、类名和按钮中的文字，并且给按钮绑定了一个search的方法，这个方法主要处理跳转和搜索。

         if(event.target.id === '搜索'){
     
             this.setData({
                 searchContent:undefined
             })
             wx.redirectTo({
                 url:"../goodsList/goodsList"
             })
         }else if(event.target.id === '取消'){
     
             this.setData({
                 searchContent:undefined
             })
             wx.navigateBack({
                 delta: 2
             })
         }
     

     • 通过方法的event对象中的target的id找到之前我们设置的id，通过这个id来确定当前我们点击的到底是哪个按钮，分别进行路由处理，但是通需要给searchContent的值改变为初始值undefined。

   • 因为搜索列表页面和商品列表页面是两个单独的页面，所以在搜索列表选择好之后需要让商品列表知道并且发送请求(暂时未搭建服务器，所以暂时使用本地数据，后期会统一将数据挪到服务器，然后在将发送请求方面的知识)，如何让两个页面通信呢，我暂时选择的是在app.js中的globalData中定义一个全局的变量，在搜索列表页面中改变它，然后在商品列表页面中获取他然后把它当做请求的参数。

   • 搜索页还有清空和换一批的功能，很简单暂时就不处理了，接下来看商品列表页的处理

商品列表页

1. 刚刚已经通过全局的变量实现了搜索页和商品列表也的模拟通信，暂时不发送请求，自定义两组数据来模拟吧。

2. 最上边是一个搜索框，可以实现搜索功能，定义一个变量来存储搜索框的值，再定义一个发送请求的方法，当搜索的时候触发事件还有就是页面刚加载的时候通过全局变量searchKeyword来搜索商品，还有一个功能就是通过搜索跳转到的详情页中的搜索框会直接显示搜索的关键字。

   • 这里直接就实现跳转后搜索框中显示刚才的搜索关键字，只需要定义一个变量并且把全局关键字的值赋给它，并且绑定到输入框的value就可以了

       <input placeholder="搜索京东商品" value="{{searchKey}}" type="text" bindinput="keyinput"/>
   
       data:{
           searchKey:'笔记本电脑'
       }
   
       this.setData({
           searchKey:app.globalData.searchKeyword
       })
   

3. 接下来是四个筛选的选项

   • 这个正常来说应该是点击之后根据条件发送请求，但是在这里暂时不做，只是简单实现点击变色效果
   • 我暂时使用的方法是通过绑定data-id={{index}},在event.currentTarget.dataset.id下可以找到，当两个匹配的时候就可以确定点击的当前按钮从而改变样式

       <view wx:for="{{filterData}}" data-id="{{index}}" bindtap="select" class="{{select == index ?'filter-select':''}}">
           <text>{{item}}</text>
       </view>
   
       select:function(event){
           this.setData({
               select:event.currentTarget.dataset.id
           })
       }
   

4. 下面是个列表显示商品，布局不多讲，这里就是布局之后，使用wx:for把获取到的数据显示在下面就可以了,有一个平时不是很常用的效果多行文字隐藏给出代码如下：

        width: 200px;
       word-break: break-all;
       text-overflow: ellipsis;
       display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
       -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
       -webkit-line-clamp: 3; /** 显示的行数 **/
       overflow: hidden;  /** 隐藏超出的内容 **/