小程序教程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;  /** 隐藏超出的内容 **/