h5自定义属性

<div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
### 如何在 UniApp 的 H5 平台中实现自定义 Tabbar #### 1. 修改 `manifest.json` 文件配置 为了启用自定义 tabBar,在项目的根目录下找到并编辑 `manifest.json` 文件。进入 **"App模块配置" -> "自定义导航栏和底部标签栏"**,开启 `custom-tab-bar` 字段,并将其指向一个 Vue 组件路径[^1]。 以下是具体的配置示例: ```json { "plus": { "tabBar": { "custom": true, "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/cart/cart", "text": "购物车" } ] } } } ``` 注意:H5 平台上默认不会显示原生 tabBar,因此无需调用 `uni.hideTabBar()` 方法来隐藏它[^3]。 --- #### 2. 创建自定义 Tabbar 组件 创建一个新的 Vue 文件作为自定义 tabBar 的组件文件,例如命名为 `mytab.vue`。此组件将负责渲染所有的 tab 列表项以及处理点击事件跳转逻辑[^2]。 下面是该组件的一个简单实现例子: ```vue <template> <view class="tab-bar"> <block v-for="(item, index) in list" :key="index"> <view class="tab-item" :class="{ active: current === item.pagePath }" @click="switchPage(item)" > {{ item.text }} </view> </block> </view> </template> <script> export default { data() { return { list: [ { pagePath: "/pages/index/index", text: "首页" }, { pagePath: "/pages/cart/cart", text: "购物车" } ], current: "" }; }, onLoad(options) { this.current = options.path || "/"; }, methods: { switchPage(item) { const url = encodeURIComponent(item.pagePath); if (this.current !== item.pagePath) { uni.redirectTo({ url: `/pages/mytab/mytab?path=${url}` }); } } } }; </script> <style scoped> .tab-bar { display: flex; justify-content: space-around; align-items: center; height: 50px; background-color: #f8f8f8; } .tab-item { padding: 10px; font-size: 14px; } .active { color: blue; } </style> ``` 上述代码实现了以下功能: - 动态加载指定的页面列表。 - 当前选中的 tab 使用样式高亮标记。 - 跳转到对应的目标页面时传递参数以便更新当前状态。 --- #### 3. 页面间通信机制 为了让每个页面都能知道当前处于哪个 tab 下面的状态,可以通过 URL 参数或者 Vuex 来共享数据。这里采用的是通过 URL 查询字符串的方式获取当前激活的路由地址。 例如,在主应用入口处监听路径变化从而同步至子组件: ```javascript onLoad(option) { console.log('Current Path:', decodeURIComponent(option.path)); this.current = decodeURIComponent(option.path); // 更新当前活动页索引 } ``` 这样可以确保无论何时切换回某个特定页面都会自动刷新其关联的菜单选项卡位置。 --- #### 4. 注意事项 尽管可以在 H5 中完全依赖前端技术来自由定制外观设计,但仍需考虑兼容性和性能优化问题。比如减少不必要的 DOM 元素数量、控制图片资源大小等措施都可以提升用户体验质量。 另外值得注意的一点是,如果涉及到多端适配开发,则可能还需要额外调整部分样式属性以满足不同平台的要求差异性。 --- ### 总结 综上所述,通过修改 manifest 配置引入外部组件形式即可轻松完成整个流程操作;同时借助简单的 JavaScript 控制流管理界面交互行为,最终达成预期目标——即制作一款高度灵活可扩展性的跨屏解决方案!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值