微信小程序 自定义组件

   日期:2021-04-08     浏览:100    评论:0    
核心提示:Intro.自定义tabBar的配置在app.json文件的UsingComponents下注册 "tabBar": { "borderStyle": "white", "selectedColor": "#333333", "color": "999999", "list": [ { "text": "阅读", "pagePath": "pages/post/post", "iconPath": "/imag

Intro.自定义tabBar的配置

在app.json文件的UsingComponents下注册

  "tabBar": {
    "borderStyle": "white",
    "selectedColor": "#333333",
    "color": "999999",
    "list": [
      {
        "text": "阅读",
        "pagePath": "pages/post/post",
        "iconPath": "/images/tab/post.png",
        "selectedIconPath" : "/images/tab/post@highlight.png"

      },
      {
        "text": "电影",
        "pagePath": "pages/movies/movies",
        "iconPath": "/images/tab/movie.png",
        "selectedIconPath" : "/images/tab/movie@highlight.png"
      }
    ]
  }

tabBar的案例可以接触到什么是自定义,但是自定义的程度很小,大部分还是内置完成的。
注意跳转到有选项卡的页面需要使用switchTab

如何创建第一个自定义组件

①根目录下创建components>post>index
②components>post>index.js中定义属性
properties: {
text: {
type: String,//类型
value: ‘123’//默认值
}
}
③在page > xx.json 定义名称
“usingComponents”: {
“c-post”:"/components/post/index"
}
④在page > xx.wxml中使用
⑤components > post > index.wxml
{ {text}}

自定义组件属性

自定义的属性 text 也可以做数据绑定
快速自定义属性时,无法自定义默认值
properties: {
text: String // 也可以为Number(默认值为0)、Object、Boolean(默认值为false)
}

把原来post页面的文章部分作为一个组件,wxml和wxss复制到组件对应下wxml和wxss下

为什么index.wxml(组件的)打印data和posts.wxml不一样:
posts里面data是自带的,所以不用,直接去打印res。然而index是接受到res放进properties


 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服