关于H5自定义属性


今天做步步高公司的校招Web前端面试题,考到了H5中的自定义属性。说实话真的一脸懵逼,啥是自定义属性????其实这个自定义属性以前做项目用框架时经常见到,但是并没有去了解。

自定义属性的存在形式

其实就是HTML标签中的data-*属性

作用

自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进DOM中,对于整个DOM的布局和表现无任何影响,但是却可以方便操控整个网页的交互以及想要表达的效果。

自定义属性的设置

  • 直接在标签中设置:
<span id="test" data-age="21">test</span>
  • 通过js设置
var test = document.getElementById('test');
test.dataset.age = "21";
  • 通过jQuery设置
$('#test').attr('data-age','21');
或者
$('#test').data('age','21');

自定义属性的获取

  • 使用js获取
var test = document.getElementById('test');
test.dataset.age
  • 使用jQuery获取
$('#test').attr('data-age');
//或者
$('#test').data('age');

css中使用自定义属性

例如某个标签自定义属性如下:

<div data-city="Beijing"></div>

css中设置html中带有自定义属性的标签样式,代码如下:

[data-city]: {
	color: red;
}

注意,这样设置的样式优先级低于class

css中通过不同的自定义属性值设置不同的样式,代码如下:

[data-city = 'Beijing']: {
	color: red;
}
[data-city = 'Shenzhen']: {
	color: green;
}
### 如何在 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 控制流管理界面交互行为,最终达成预期目标——即制作一款高度灵活可扩展性的跨屏解决方案!
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值