【详细】豆瓣小程序--从0-1实现自己的导航栏控件

    

导航栏是app,小程序中非常常见的一个需求,作为常见的需求,如何高效地完成该需求的实现,就异常关键。那么我们如何从0到1实现自己的导航栏控件呢,请看本文。

 导航栏实际效果

1. 没有点击时候,导航栏显示放大镜图标

2. 点击导航栏,显示搜索两个字

3. 可以输入关键词,进行搜索导航

由于在一个小程序里面,导航栏功能出现很多,因此我计划将其做成一个控件,以便多次复用,减少代码重复冗余。这就涉及到了components组件的知识点

那么这个功能的整体架构和应用可以分为两部分,控件的布局,应用调用页面的布局

searchbar空间布局

      首先是wxml,这里我定义了search-navigator这个控件对象,isnaviagator这个判断是否导航的参数,url则是跳转到对应的导航页面。

<view class="searchbar">
  <navigator wx:if="{{isnavigator}}" url='/pages/search/search' class='search-navigator'></navigator>
</view>

     其次是js文件,定义isnavigatior参数

// components/searchbar/searchbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isnavigator: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  }
})

 接着是,wxss布局样式,涉及导航栏的外观。

background-repeat 属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。

search-input-group是值得,导航条里面输入文字的那部分布局,见红圈部分。

background-image:url() 设置的是放大镜图片文件位置,这里也可以才用上传的webp去实现

.searchbar{
  background-color: #41be57;
  padding: 20rpx;
}

.search-navigator{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  background-image: url("pages/images/search.png") ;/* 放大镜图片文件 */
  
  /****  采用webp,将图片上传到网上,再去url指定获取图片  ****/
  /*  background-image: url("data:image/png;base64,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"); */


  background-position: center center;
  background-repeat: no-repeat;
  background-size: 8%;
}

.search-input-group{
  width: 100%;
  height: 60rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}

.search-input{
  min-height: 40rpx;
  height: 40rpx;
  font-size: 12px;
}

这样一个导航栏的控件searchbar就实现了,那么该控件在其他页面如何调用的呢

调用导航栏控件 

wxml文件,在这里直接引用searchbar控件,传入isnavigtor参数为true

<searchbar isnavigator="{{true}}"></searchbar>

 对于引用页面,需要在json中添加引用的控件依赖

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar"   
  }
}

 那么在这个页面,我们就可以轻松的使用searchbar这个导航栏控件了,非常方便。喜欢给我点个关注吧

猜你喜欢

转载自blog.csdn.net/m0_37218227/article/details/106984839