更新记录
v1.0.5(2020-07-21)
下载此版本
样式修改及示例
v1.0.4(2020-07-01)
下载此版本
解决锚点错位问题,以及增加默认高度可在源代码修改
v1.0.1(2020-06-19)
下载此版本
V2020.6.19
第一次发布
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
2.7.13 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
anchorView--选项卡导航栏
简介
这是一款选项卡导航栏组件,最佳锚点<a href="#item1"></a>
定位替代组件。
组件使用
在script
中使用
import anchorView from '@/components/anchor-view/index.vue'
export default {
components:{anchorView},
data() {
return {
outermostView: '.contain-view',
minScolltop: 100, // 当滚动多少时,出现
};
},
onPageScroll(item) {
this.scrollTop = item.scrollTop
},
}
在template
中使用
<anchor-view
:scrollTop="scrollTop"
:minScolltop="minScolltop"
:outermostView="outermostView"
:types="types"
></anchor-view>
props
属性名 |
值类型 |
默认值 |
说明 |
minScolltop |
Number |
0 |
是否启用浮动功能(可选) |
scrollTop |
Number |
0 |
浮动到顶部距离 |
outermostView |
String |
.contain-view |
当前页面的最外层节点类或id |
types |
Array |
[] |
tab选项卡数组列表,建议3-5个(必填) |
tabList
属性名 |
值类型 |
默认值 |
说明 |
title |
String |
-- |
选项卡的标题(必填) |
anchor |
String |
-- |
选项卡导航目标元素的ID(必填) |
演示示例
已上传使用示例,可下载示例项目。
<template>
<view class="contain-view">
<anchor-view
:scrollTop="scrollTop"
:minScolltop="minScolltop"
:outermostView="outermostView"
:types="types"
></anchor-view>
</view>
</template>
<script>
import anchorView from '@/components/anchor-view/index.vue'
export default {
components: {
anchorView
},
data() {
return {
outermostView: '.contain-view',
minScolltop: 100, // 当滚动多少时,出现
types: [
{
title: '商品',
anchor: '#product'
},
{
title: '评论',
anchor: '#comment'
},
{
title: '详情',
anchor: '#details'
},
{
title: '参数',
anchor: '#parameter'
}
],
}
},
onPageScroll(item) {
this.scrollTop = item.scrollTop
}
}