新版HBuilderX在uni_modules创建搜索search组件

  • 1、创建自定义组件 my-search

新版HBuilder没有了 component 文件夹,但是有 uni_modules 文件夹,用来创建组件:

  1. 右键 uni_modules 文件夹,点击 新建uni_modules创建
  2. 在弹出框,填写组件名字,例如:my-search

新版HBuilderX在uni_modules创建搜索search组件_第1张图片

  • 2、使用该组件

新版HBuilderX在uni_modules创建搜索search组件_第2张图片

运行到微信开发者工具查看:

新版HBuilderX在uni_modules创建搜索search组件_第3张图片

 修改 my-search 组件的样式:



某个用到 搜索框的页面:

新版HBuilderX在uni_modules创建搜索search组件_第4张图片

      // 点击搜索跳转 分包
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      },

 注意:我们上面搜索框,是给用户看的,实际上,不能搜索,我们需要点击跳转到搜索页面

  • 3、新建分包 search 页面

建立一个分包:【名称为 search】

uniapp 配置小程序分包_打不着的大喇叭的博客-CSDN博客

新版HBuilderX在uni_modules创建搜索search组件_第5张图片

新版HBuilderX在uni_modules创建搜索search组件_第6张图片

  • 4、使用已有的扩展uni-search-bar组件

网址:uni-app官网 (dcloud.net.cn) 

新版HBuilderX在uni_modules创建搜索search组件_第7张图片





你可能感兴趣的:(前端,javascript,开发语言)