做个小程序(三)——导航栏&搜索框

535 阅读8分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

hello,项目都会新建了么,小程序页面都摸熟悉了的话我们就开始做一个小程序上手练一练吧! 我们接下来要做的就是做一个简易豆瓣电影小程序。

简易豆瓣小程序

既然要做我们就需要做好产品分析详细的来了解一下下究竟需要我们实现那些东西。

主界面

主界面由顶部导航栏,头部搜索栏,以及下面的三种影视列表组成。 一主界面

更多页面

更多页面和主页面的差不多,唯一的区别就是下面是单一的影视类别的影视,点击主页面的更多,就可以跳转到这里。

2】二更多

详情页面

详情页面石油顶部的导航栏,下面的影视介绍,中部的豆瓣标签以及底部的评论组成。

三详情

搜索

详情页面石油顶部的导航栏,以及一个搜索框,还有页面下部的影视搜索列表组成。

四搜索

历史搜索

详情页面石油顶部的导航栏,以及一个搜索框,还有下面的历史记录组成。 历史搜索

我们总览了所有的页面,我们现在可以进入到我们的新建小项目中为这几个项目新建一下各自的page页面,对应一下基本的项目构架。 项目页面

我们接下来可以实现一下豆瓣中通用的部分:

豆瓣导航栏实现

  • 在app.json中修改一下界面的导航字样 导航栏字样设置

豆瓣搜索框实现

既然说到搜索框那我们就不得不提出组件这个概念,组件是啥组件就像是你们家的火锅底料,他可以每次用每次取,不用每一次都自己去重新配置配方,哎我又想吃火锅了,也有点儿想我们程序中的函数,哪儿用到它就到哪引用。 话不多说开干!

组件定义

  • 首先创建一个总的文件夹:用来放组件我这里管它叫component位置一般在二级夹。

  • 组件的总夹

  • 然后再来创建一个文件夹放当前需要的组件 searchbar组件夹

  • 右击这个组件文件夹然后选择新建component起个合适的名字我这里的组件管它叫searchbar。 就会生成一些基本文件 右键选component 组件建成

  • 首先我们写出wxml基本样式:

<!--componests/searchbar/searchbar.wxml-->
<view class='searchbar'>
  <navigator class='search-navigator'></navigator>
  <view class='search-input-group'>
    <!-- 添加input事件 -->
    <input class='search-input' placeholder="搜一搜" ></input>
  </view>
</view>
  • 再用css给它美化:
.searchbar{
  background-color: #41be57;
  padding: 15rpx;
}
.search-navigator{
  width: 100%;
  height: 40px;  
  border-radius:10rpx;
  background-color: #ffffff;
  /* 转为64位颜色,可以节约内存空间 */
  /* 只有小图可以转!! */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAalklEQVR4Xu1dC5gkRZGOqJ6eWZjVfc5MZ+TuIXCIishbUBQP8XEC8lAEREB8IpyCiiB63oHyVpTzeZ4IKIg8PgVEjxWFUznl4RP3/BBlwcduZfXMsMDILuzOTFfcF3yNjrsz292VWdVV1Znft9/waUVkxJ/5d2ZVRkYg+OYR8AjMiQB6bDwCHoG5EfAE8bPDI7AFBDxB/PTwCHiC+DngEUiGgF9BkuHmpXoEAU+QHhlo72YyBDxBkuHmpXoEAU+QHhlo72YyBDxBkuHmpXoEAU+QHhlo72YyBDxBkuHmpXoEAU+QGQNtjNk6CIKdG43GtkEQLGfmZQAgfxUiPgsAarPNC2Z+FADWI+I6+cvMEwDwJ0R8iJkfDILgQQD4g1JqvEfmVWnc7FmCrFmzZgki7g4AuyHirvIXAJ4NAEFao8vMaxFxJQD8Wv4y86+VUr9BxMm0+vR67RDoKYIYY/YAgMMA4FAA2NkOOjfSzDyJiHcCwPfkn1Lql4jIbrR7LbYIlJ4gYRi+EhEPAoCj5toi2YLoUl5WGQD4fhAENyqlrnep2+vqHIFSEiSKoiEAOJmZTwKAkc5hyYcEMz8CAF9HxCuI6Jf5sKq3rCgVQer1urxgvw8AjkHEgTINJTOvRMSvAMBVRPRwmXzLsy+lIEgURQcy8wcAYP88g+3Qti8ODAyct2TJkjUOdXpVsyBQaIIYY14CAJcAwJ69NrrNl/vLAeACIvpzr/mflb+FJEgYhvJJ9uOI+IqsgMprP8w8hYhClPM9UdyPUqEIEobhjoh4AQAc7h6KYmtk5o0AcCERne/PVdyNZSEIwsz9xphzEPE0AKi4c798mpj5gSAITlRK/aB83mXvUe4JYozZk5nlU+cO2cNT6B6vBIDT/BcvuzHMLUGYeSCKogsB4JQ0wz/s4Mu99DgzH6O1vi33lubUwFwSpF6v7xPH8dUAsF1OcSuSWRK2cr5S6ixEbBTJ8DzYmjuCGGM+BADn+lXD7fRg5jsHBgaOXLp0aehWc7m15YYgzDwviiLZN7+h3JB3zzsJXQmC4Fil1IruWVGsnnNBkPHxcZqamroZACTaNg/tcWZehYirAOD3iPjUfQ5mlv993cDAwLogCNYtXrx4YvXq1Vv19fXNR8T5ADAIAPOZeVEcx9vLHRJm3gERZaso/7bOg3PM/Amt9Rl5sCXvNnSdIFEU7cXM3wGA4S6CNQ0AP2HmFX19fStGRkbkzobTxsw4Njb2gjiOXyX/AOAliDjPaScdKGPma4noOEQU332bA4GuEqQZii73ILrR5Obf9UEQrOjv7791yZIlf8nSiOaW8mXMfAAivgYAnp9l/82+bm00GocvX778yS70XYguu0aQKIoOiuP4RkSsZojUOlmtEPE6pdQteTpxHhsb22FqaupURHyzbNMyxOSnW2211asXLVr0WIZ9FqarrhDEGPM6APhmhij9ERHPqtVq1yPihgz77bir8fHxZ0xNTb0VAE4FgG07VpBM4LfVavWAoaGhKJl4eaUyJ0gYhkcj4teyCBlhZnnBPlcpdTUixkUaRnlnqdfrEsb/HgCQd5a0x+rBSqWy78jIyGiRcErb1rRB/zv76/X6UXEcX5u2UwDwICJ+TCkln40L35oHp19K+x49M9/b39+/39DQ0OOFB82RA5kRRAa50WjckfI7x/1yyKiUuqZoK0ar8WTmwBjzbkQ8BwCe2ep5i///x0op+XDgM61ksGw/NU5jY2P/ODU19VNEXGQxcFsSnZatVK1WO7fs4RRjY2O16enpTwHAG1PCEpj5ZiI6vGw/MknwSn0FeeyxxxY98cQTvwKAbZIY2IbMQ4h4tFLqZ208W5pHjDH7AYBclNo+JacuI6K3p6S7MGpTJUjzHsePEHGfNBBh5ssR8T1E9EQa+vOuU/CNougDzPwRRNzKtb3ygUBr/TnXeoukL1WCGGNuSOP2HzM/VqlUjq/Vat8uEthp2RpF0U7MLBekJN2Rsyb33qvV6t7Dw8P3OlNaMEWpESQMw1MQ8dOu8WDm26vV6rHDw8N117qLrM8YI1vY21PYcv2xWq2+oFe/bKVCELk7DgD3phBrdKVS6gSfmnN2Kk9MTCxev379rSlkebmRiORwt+eac4Iwc18URZIF0HXu20uVUid6cmx5jjZjvGRrK/FdzhoinqyU+k9nCguiyDlBJLkCAHzEsf+XEtE7HessrbrmmcmliCghK05aM2vKDlrr1U4UFkSJU4LU6/W94zi+27HvnyIiyWbiW4cIGGP+oxnT1aHknI+vIKIDXSkrgh5nBJHYoSiKfgMAz3PlODNfrLU+3ZW+XtMjY2KMuRkRD3bo+xFElGWgqUPTO1fljCDGmHcBgMs96g1E9PrOXfISMxGQG4+VSuUOhy/u9Wq1+uxe+arlhCASoj05OSklx1yFkkhM1R69egDomuLGmKUAIJEGUkbORfs0Eb3XhaK863BCEGPMJwHg/Y6cXVepVHYdGRmRe+C+OUKgeSHrHkc/Yo0gCHar1Wr/58i83KqxJsjo6Oj2jUZDkhu4aocT0U2ulHk9f0MgDMN9EfHHLjCRNEJa631d6MqzDmuChGEoL4GvdeTkJ4lI6nz4lhICURSdzswfd6EeEfdXSv3Qha686rAiiOTNbe5trf1j5ruJSDJ9+Ox/1mjOrYCZK8aYnyGilJCwasz8P1rrA6yU5FzYliDfAAAXX5rGK5XKzv66ZzazpV6vPz+OYyfvD5VK5cUjIyN3ZWN59r0kJkgURZIU7SEXl67kxFcpdUX27vduj2EYfgwR/80BAqU+PExMEGOM3JF+hy3Acg+aiHb3MVa2SHYmLzFzxpj7HJWVkE/ypazCm4ggUmY5juM1iNjf2bBs/nQQBPvUarV7bPV4+c4RaIYGyfYo0TyY0aNU3j2+cwvyL5EIGKnbwcwftHVPMhtqrY+y1ePlkyNgjJEiqFaHfsy8oVKpLK3VauuTW5JPyY4J0vwKMm574CTRoYj4bF94srsTo5moTi6f2SbWPpGIZNtdqtYxQYwxrwaA7zpA4Twich0W78Cs3lPhIuqXme/RWqeSe6CbI5KEIF8BAMkfa9PGJS7Ix1rZQOhOdu3atcs2btz4JwdFi55LRBJHV5rWEUGYuRpF0SO2yZWZ+Uyt9UWlQbEEjhhjrndQvKh0kRAdEcQYI/XJ5TqnTZMcuSO++qoNhO5lHV12G1dK1cqUcK5Tglj/ykjWPq31oe6H2Gu0RSAMw58g4ott9JQtPqttgsg95yiKJhxsrw7TWn/LZhC8bDoIOCpLcS4RuTihT8fJDrW2TZBmqbSfdqh/08cfVkqNlGkJtsQjV+LNH8EHbMpvM/NdWmurVShPoHRCEElx+Qkb4yXMWmttfcBoY4OX3TICxhgpwf2vFjjFfX19C4aHh9dZ6MiNaNsEcXHvo1qt7jg0NPT73HjvDdkMgSiK9pcwdhtogiA4pCxpYdsiiKP3j/uJ6Lk2wHvZ9BFoBjE+bpkVszR31tsiyNjY2K7T09NSwsCm+XT6NuhlKGuMkfSlUvYtUSvTqXpbBDHGSEFJSUKWuPk7H4mhy1wwDMMzENHmIHc9EWVZqTc1jNolyFcBwCqcmZmfo7X+XWqeeMXOEDDG7A4Av7BRGATBdrVa7Q82OvIg2xZBbA+QmHmt1lpyM/lWAASauX0lYntxUnPL8qLeFkGMMRIOPZIULAC4SWreWch70YwRcBCb9WEiuiBjs51315IgY2Nj86enp63KAsvlKq21k1QzzhHwCmdFwBgjZyFyJpK0XUNExyQVzotcS4K42I82C9TfmRenvR2tEYii6Ehmvq71k7M/wcwrtda7JJXPi1xLgtTr9aPiOL7WxuA4jpcuW7ZsrY0OL5stAg4+7T9ORGnWc88EkJYEcbDUslKq4rOWZDKezjph5oEoijbYKFRKDSDipI2Obsu2JEgURZ+RcsAWhj5MRE6rr1rY4kU7QCAMwxARqQORv3u0DJ96WxIkDMPLLEt5/ZaInBXVSTpYXq5zBCRFqU1dkSAIXlSr1VxXHOvcEQuJdghyDSIebdHH/xLRfhbyXrRLCIRheBsiJs69i4gHKqVWdMl8J922QxDb7O09W0LYyQh1UYkxRq5X25xfvY6IbuyiC9Zdt0MQq18RAPAVaq2HqTsKwjC8AhFPSNo7M79Ja/31pPJ5kGuHIHchok2+o/OJyOYCTh5w6kkbbPNlMfPbtdaXFRm8lgQxxvxc6gVaOHkaEX3KQt6LdgmBMAw/ioj/btH9SUT0RQv5rou2QxCpkPpSC0tLEZNj4X9hRR3kYD6eiK4qLADtZPU2xtwCAK+xcNJvsSzA66ZoGIafR8STk9pQhojedlYQq1xYiPhZpdQpSUH2ct1DwBgjv/7HWljwUiJyUjTUwgYr0ZYECcPwckR8S9JemPkKrfVbk8p7ue4hYIyRasOJk/wFQbBzrVb7Tfc8sO+5JUEchJp8g4jeYG+q15A1AsYYyW6yf9J++/v7ly1dujRMKp8HuZYEMcbIpZczkxrLzD/RWr8kqbyX6x4CxpjfAsBzkloQBMH8ohfVaYcgtgkbfLBi0hnWRTkplBRF0UYAqCQ0g4koSCibG7GWBKnX6wfHcfxtG4sHBgYWLFmy5C82OrxstgiMjo5u32g0Vln0Ok5EwxbyuRBtSRBjjCR7u8/GWl+o0wa97shGUfQaZpZP/IkaM/9ea71jIuEcCbUkiGTai6JILr20fHYuvxDxzUqpK3PktzelBQIOcqHdSkT/XHSg25r0YRj+GRGXWzhbmlSUFhgUStQYIz9ox1kYXYoalG0RxBjzAwD4p6RgMfO9Wuvdksp7uewRMMZEAFCz6Lnwoe7ie7sE+TIAvM0CrLharS4cGhqySh9k0b8X7QCBKIqexcy2WRG3KUOJ77YIEkXRvzDz5zrAeLNHEfFgpdR/2+jwstkgEEXRCRIBYdHbBBEttJDPjWhbBKnX6zvHcbzSxmopvqO1PsNGh5fNBgHbi1IA8F0isglwzcbRNnppiyCixxgj5xjPaEPnrI+UKSV+UgyKImeMeQgAtrWwtxQv6G2/g8iDYRh+CxEPsQCtEQQB1Wq1MQsdXjRlBIwxEloiISY2rRQv6B0RJIqi05j5YhvUEPF0pZSVDpv+vWxrBIwxcvvzfa2fnPuJvr4+NTw8LAnPC9/a3mI5qnJ7HxHtVHjUSupAs9SeTOzEif7K9km/bYIwMxpjHrapGSHzipl311rblnMr6RTtrlthGB6CiFY17BHxbKXUR7vribve2yZI8z3kC4h4kmX3nyEiiRD2LWcIOMiDBZVKZZeRkRGrL555gqUjgtTr9QPiOL7NxgFmfnJwcFAvXLjwURs9XtYtAqOjo9s1Go0HACBxiDozR1rrxLl83XrkRltHBJE7AsaYMdttlqSSUUqd48YFr8UFAsYYSfD2RktdpYu564ggAp4x5ksA8A4bIJn50TiO9fLly5+00eNl3SDgYvUQSxBxf6XUD91YlQ8tHRMkDMNXIuL3bM1n5lO11p+x1ePl7REIw/BaRDzKRhMzryaiZyFibKMnb7IdE8TVNouZDRFtg4jTeQOll+xxdDAokH2IiC4sG3YdE0QACMPwE4j4AQdgvJ+ILnGgx6tIiEAYhtch4pEJxZ8SY+aN8+fPpwULFjxioyePsokIsnbt2mUbN26UcOg+S6cer1arOw4NDcndA98yRsDh6nEVER2fsfmZdJeIIGKZMeZrAPAmWyulkqrW2qZAj60JPSnfPPi90zJz/1PYlTnnQGKCOKiC+teJGQTBK2q12u09OVO75HQYhmcg4kW23TPzr7TWu9vqyat8YoI030VuR8SX2zonX0D6+/t38jcObZFsT17u9zQajZ8jYn97Elt86ggi+qYDPblUYUWQKIoOZGZXtwS/SURH5BKlEhnFzP3GmJWI6CIlz8+JaK8SwbOZK1YEaa4ithWoZhr1LiL6rzID3m3fjDHy1fC9Luxg5ldqra1Cj1zYkaYOFwTZDRF/6cJIZt5QqVT2KnpGcBdYpKEjiqKXMbOrk+4fE5FNYaU0XHSu05ogYpGjOJ6nnJOMfES0CyJucO5tDytcu3btMzds2HA/IipHMOxFRFKer9TNCUHGx8dpcnLyIUQccIEWM99MRIeXLWzBBTZJdDDzvCiKvg8ArrLs30BEr09iS9FknBCkuYqcCwAuq9leRkRvLxqgebO3+VK+wsXXxqZv6wFgJyL6U958TcMelwTZGgD+aHNdcxYHLySiD6XheC/obOZVlsz8znLkIuK7lVKf7wX8xEdnBBFlYRgeiohStstl8/FaCdF0cUNwk65/RESJU9AmdKOrYk4J0iTJZYjotCYhM5+jtbap191VkLPuvJl84ToAcHauJF8YEfE5vbK1enrMnBOkXq8PxnH8awDY3vHE+KpS6q3+xX3LqEqMVRRFUp3WOk5uZk/MfIrW+rOOxzT36pwTRDyu1+v7xHF8Vwre30hEr0tBbylUPvroowuffPLJa1y+cwgwzLxSa71LKUDq0IlUCNLcan1U7p53aE/LxyU4DhEPK0Pm8JbOdvBAM3/ydwDgHzoQa/dRZuZjtNbXtitQludSI0jzC8rdALBHCmBNIOIblVIrUtBdOJVhGB4DAFLP3sk51BwA9CRJUiOIgNw8QPwZIqaSCkZSoRLRmYjYKNysdmCwnHFEUSSfXLM6L+o5kqRKEJkDcmuNmeViziIHc2IzFcx8V39//xFDQ0MmDf151Vmv17dtNBo3IOKuWdvYSzUnUyeIDF4URS+M4/hHiDgvjcFk5scA4CwiksyPpU4CMT4+/ozJycmPAMCpKW+ptjRUPbOSZEKQ5koip7nyEpm0MH1LbjHzA5VK5aQy3k5snm3IVkoS7uWh/nhPkCQzgjRJIt/m5S572k1Cui8iou+m3VEW+uv1+svjOJYziOdl0V+HfRxPRHLuUsqWKUEEwTAMj0ZEIUlqK8nTI8XMdwdBcG5RayOOjY3tMDU1dbFl4aK0J26pV5LMCdJcSSRU+htpj9wMoqwMguA8pdT1WfVp048xRvCRqsKFqfOHiCcopb5q43ceZbtCkOaL+0FxHN+IiNUMgZkAgJsQ8bparfb9PL3QN7PEvIWZ34SISzLExFVXpVxJukaQGS/u3Trsk6Kk1zLzLZVK5bZarSb3HDJtExMTi9evXy8J12S1eH6mnafXWaneSbpKkCZJ5KRdSJK47JftWDPzJADcgYhixy1EdL+tzk3lmzmNX4CIkgXkhcy8FyJKObrU38Vc+9JCX6lWkq4TRMAeHx9Xk5OTst3aO+PBnKs7WV1WMfMqRHyAmR8KguAPzPw4AKxj5vWDg4PrpAjQ6tWrt5o3b97CqampBUEQLASAQQBYGsfxAmZeiIg1Zn6RiwyGrrBh5u8g4sGu9M2h5zgiyuKLZapu5IIg4mEzbOLLAHBcqh73sHKpywIAR2utv2eMkdQ/aSYO5+aL+5VFhjw3BHkaxDAM342IMnC2ibGLPC5p2P6LarX62pmJwj1JWsOcO4I8/V7CzFc7yv7XGoVyP8GyUiilPjjbVztPki0Pfi4JMmPLdTYAnFHCF9msKDnBzEfKlmpLHXqSzI1ObgnytMnGmD38apKIT1/v6+s7bXh4uN6OtCfJ7CjlniAzVhMpTn+6X022PN2Z+XeI+E4iuqMdYsx8xpNkc8QKQZAZL/A7IqLUwTus08HvgefXIeLHarXaJTYRAp4kfz9TCkWQGUSRhNlSIddVKs0i80fOZb4wf/78i1zVCPQk+dt0KCRBZhDlFYh4AQDsWeQZntB2ObT83ODg4MWuiOG3WwXfYs01kcIwPAQRTwaAVyecbEUSkxXjksHBwUvkJD9Nw40x7weAT6bZBzO/TWt9eZp92Ogu9AqyqeOjo6PbTU9PnwQAkmBusQ0weZOVu/cAcFm1Wr1ueHh4XVb29fp2q1QEeXrSMPNAvV4/mpllVXlhVpMphX7GAOAqZr5Ua/27FPS3pdIYcyYAyFY2rZbbsJRSEmTmKEr2jziOD21ePnpVWiPsUO/DACB3VW7K0wWvDEgi8Xi5226VniCbvHhuHQSB3O8+iJn3z1Eoyw8AQGr93UpEv3BINqeqepEkPUWQTWfLmjVrliDivkEQvJiZ92XmPdNKTTRj+7cWACRPmBQ/vbNWq91TpHJzGZAkV9utnibIbD+v9Xp970ajsV0QBMsAYDkzL2NmQsRtAKA2m0wzjHw9IsrLs9xMlE+w48w8ioijADAq/x0EwSql1H1Of9a7oMwYI0WNzk+563cQkVx/6GrzBOkq/MXtvFdWEk+Q4s7RrlveCyTxBOn6NCu2AWUniSdIsednLqwvM0k8QXIxxYpvRFlJ4glS/LmZGw/KSBJPkNxMr3IYUjaSeIKUY17myosykcQTJFdTqzzGlIUkniDlmZO586QMJPEEyd20KpdBRSeJJ0i55mMuvcmCJABwIhFd6hoATxDXiHp9syIQhuHZiHhWyvBIuiOnJPEESXnEvPq/IWCMkVuJcjsxzeaUJJ4gaQ6V170ZAkUjiSeIn8SZI1AkkniCZD49fIeCQFFI4gni52vXECgCSTxBujY9fMdFWEk8Qfw87ToCeV5JPEG6Pj28AXleSTxB/PzMDQJ5XEk8QXIzPbwheVxJPEH8vMwdAnlaSTxBcjc9vEHNleQ8APhwymgcS0RXb6kPT5CUR8CrT45AyivJ/Yi4n1Jq3BMk+Rh5yS4jkBJJ2iKHuO5XkC5PAN99awQck6RtcniCtB4b/0ROEHBEko7I4QmSk8H3ZrSHgA1JmHmVlLlo9c6xqSV+i9Xe2PincoKAMeYSAHhvJ+YIOarV6kuHh4frncj5FaRTtPzzuUCgE5LYkMMTJBfD7Y1IgkA7JLElhydIkpHxMrlBYEskcUEOT5DcDLU3JCkCs5HEFTk8QZKOipfLFQIzSeKSHJ4guRpmb4wNAkISZj446dequfr2n3ltRsXL5gqBiYmJxQsWLHjEpVGeIC7R9LpKh4AnSOmG1DvkEgFPEJdoel2lQ8ATpHRD6h1yiYAniEs0va7SIeAJUroh9Q65RMATxCWaXlfpEPh/sk4gX6SIcbYAAAAASUVORK5CYII=");
  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: 14px;
}

巨多的哪一行是我将图片转成了base64格式的代码,为了节省小程序占用空间。

绑定一下下事件

  • 我们再wxml里面做一下事件标记,添加事件:
<!--componests/searchbar/searchbar.wxml-->
<view class='searchbar'>
  <navigator wx:if="{{isnavigator}}" url='/pages/search/search' class='search-navigator'></navigator>
  <view wx:else class='search-input-group'>
    <!-- 添加input事件 -->
    <input class='search-input' placeholder="搜一搜" bindinput="onInputEvent"></input>
  </view>
</view>
  • 使用js绑定事件做渲染:
// componests/searchbar/searchbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isnavigator:{
      type:Boolean,
      value:false
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onInputEvent:function(event){
      // console.log(event);
  // 传参
      var value = event.detail.value;
      var detail = {"value":value}; 
      var options = {};
          // triggerevent(”event“)触发某一个事件
      this.triggerEvent("searchinput",detail,options);
    }
  }
})

  • 最后再来设置一下json配置文件的参数,让它显示:
{
  "component": true,
  "usingComponents": {}
}

现在就可以展示一下我们组件啦!

调用

我们在需要它的地方,给引用一下:

  • 引用操作: 修改json文件记得把路径填对哦:
{
    "usingComponents": {
      "searchbar": "/componests/searchbar/searchbar"
      }
}

wxml中写标识:

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

成果检验

导航和搜索框

好啦有问题的话,评论区留言,关注aFang每天会有很多的磕和你唠,哈哈哈哈!!!