小程序实现城市搜索功能

妖狐艹你老母 2022-10-26 15:29 212阅读 0赞

wxml:

wxss:

/* pages/citys/citys.wxss */
    .location,.hotCity{ 
      padding:20rpx;
      font-weight: bold;
      font-size: 36rpx;
    }
    .getLocation{ 
      color: green;
      margin-top:20rpx;
      background: #eee;
    }
    .btn{ 
      margin: 10rpx;
      font-weight: normal;
      border-radius: 10rpx;
      background: #fff;
      border: 1px  solid  #999;
      font-size: 30rpx !important;
      padding: 4rpx  16rpx  !important;
    }

js:

// pages/citys/citys.js
    var   app=getApp();
     
    Page({ 
    
      /** * 页面的初始数据 */
      data: {  
         hotCitys:["北京", "上海",  "深圳",  "广州",  "武汉",  "荆州",  "荆门"]
      },
      //切换热门城市 ......1.点击获取热门城市 2.跳转也买你传递热门城市。。。。。
      selectcity: function(e){ 
        console.log(e);
          var     citys=e.currentTarget.dataset.val;
          console.log("获取的城市："+citys);
          wx.setStorageSync('cityName', citys);
          wx.switchTab({ 
            url: '../food/food',
          })
    
      },
      getLocation:function(){ 
        console.log(app);
    
          wx.getLocation({  
            success:res=>{ 
              console.log(res);
              wx.request({ 
                url: 'http://iwenwiki.com:3002/api/lbs/location',
                data:{ 
                  latitude:res.latitude,
                  longitude:res.longitude 
               }, 
               success:result=>{ 
                 console.log(result);
                 var   cityName=result.data.result.ad_info.city.slice(0,2);
                 console.log(cityName);
                 //跳转----食疗坊界面 --把数据传递过去。
                // wx.switchTab({ 
                // url: '../food/food',
                // })
                
                //1.url地址传递参数
                // wx.reLaunch({ 
                // url: '../food/food?cityName='+cityName,
                // })
    
                //2. 把获取的变量存储给全局app.js里面的全局变量 
                // app.globalData.cityName=cityName;
                // wx.switchTab({ 
                // url: '../food/food',
                // })
    
                //3.本地存储
    
                wx.setStorageSync('cityName', cityName);
                
               console.log("获取存储的值：",wx.getStorageSync('cityName'));
                wx.switchTab({ 
                  url: '../food/food',
                })
               }
              })
            }
          })
      },
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        
        
      // wx.request({ 
      // url: 'http://iwenwiki.com:3002/api/hot/city',
      // success:res=>{ 
      // console.log(res.data);
      // this.setData({ 
      // hotCitys:res.data.data
      // })
      // }
      // })
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

搜索页：  
wxml:

<view class="seach">
       <input bindinput="searchinput" focus="true" placeholder="请输入你想要的内容"></input> 
     </view>
    
     
    
     <import src="../productList/productList.wxml"></import>
    
     <block wx:for="{ {list}}" wx:key="index">
        <template is="productList" data="{ {item}}"></template>
    
     </block>

/* pages/search/search.wxss */
    @import '../productList/productList.wxss';
    
    page{ 
      background:#f5f5f5;
    }
    
    .seach{ 
      padding:20rpx;
      background:#fff;
      color: #333;
      font-size: 30rpx;
      line-height: 60rpx;
      height: 60rpx;
    }
    
    .seach input{ 
      width: 100%;
      height: 100%;
      background:#f5f5f5;
      border-radius: 10rpx;
    }

js:

// pages/search/search.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
    
      },
      //获取表单input输入的内容
      searchinput:function(e){ 
          console.log("输入的内容",e.detail);
          if(e.detail.value){ 
            wx.request({ 
              url: 'http://iwenwiki.com:3002/api/foods/select',
              data:{ 
                name:e.detail.value,
                city:""
              },
              success:res=>{ 
                if(res.data.status==200){ 
                  this.setData({ 
                    list:res.data.data
                  })
                }else{ 
                  console.log(res.data.msg);
                   this.setData({ 
                    list:[]
                  })
                }
                console.log(res.data);
              }
            })
          }else{ 
            console.log("输入内容不能为空！");
            //进行清空数据
            this.setData({ 
              list:[]
            })
          }
      },
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

效果如图：

![在这里插入图片描述][20210202170041558.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]

[20210202170041558.png]: /images/20221024/9ee1b9a504d1413da3839611a07ffb11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221024/a0b7a47ae94e421a9ff1b93c1c98d3a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221024/8998b21ded5f42888e74583e6cc2a97a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221024/48c675ac68dc48dfa06d98abe456d606.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]: /images/20221024/3ce66a7d184d434eb8a286da329ee020.png