用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-2-16 17:17:33 柿霖不是林 咫尺尊享 楼主 22099
    点评:很多人正在找的东西!

    微信小程序自定义组件:带未读数目的tab按钮

    组件的使用

    可以直接复制dist中的文件,到你的项目的pages页。如果放到其他的目录,需要相应修改下列引用中的路径( ./path/to/file/tabbar.subfix )

    index.wxml (页面的 wxml文件中)
    [AppleScript] 纯文本查看 复制代码
    <!-- 在需要的页面的头部 引入wxml -->
    <import src="../template/tabbar.wxml"/>
    <!-- 直接引入 -->
    <template is="tab-bar" data="{{ jhDataForTabbar }}"/>
     
    <!--
        其他的页面的元素
     -->


    #### index.wxss (页面的 wxss 文件)

    [AppleScript] 纯文本查看 复制代码
    /* 引入tabbar的样式 */
    @import "../template/tabbar.wxss";




    index.js (页面的 js 文件)文件头部:
    [AppleScript] 纯文本查看 复制代码
    import {
       init,                    // 初始化组件及页面
       Tabbar,                  // Tabbar是组件的事件注册中心
       setTabbarData            // 设置/更新 tabbar显示的数据
    } from "../template/tabbar";




    文件内部:调用init(object)函数,初始化页面
    [AppleScript] 纯文本查看 复制代码
    let UserPageData = {
        data: {
            name: "Jonham.Chen"
        },
        onLoad: function() {
        },
        // ... any others
    };
     
    init(UserPageData);




    文件内部:调用setTabbarData(object)函数,设置及更新tabbar的数据
    [AppleScript] 纯文本查看 复制代码
    const tabbarData = [];
    tabbarData.push({
        iCount: 1,              //未读数目
        sIconUrl: 'imageUrl',   //按钮图标的url或者 相对路径
        sTitle: "title",        //按钮名称
    });
     
    setTabbarData(tabbarData);




    文件内部:调用Tabbar.addListener(fn)函数增加tab的监听事件
    [AppleScript] 纯文本查看 复制代码
    /** Tabbar.addListener( fn )     增加监听事件
      *       .removeListener( fn )  移除监听事件
      *       .removeAll()           移除所有监听事件
      *
    */
    Tabbar.addListener(function(ev) {
        console.log(ev);
        // ev.key === 'note'
        // ev的key对应被点击的tab的title
    });




    PS: 当然,可以通过 git clone https://github.com/Jonham/weapp-component-tabbar.git 命令,直接用 微信开发者工具 打开目录即可预览。


    游客,如果您要查看本帖隐藏内容请回复




    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    直线方程   
    专注于与个人游戏开发者合作,有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8,详聊
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略