这期内容当中小编将会给大家带来有关怎么在微信小程序中实现一个锚点功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
计算
安全
数据库
网络和加速
企业服务
<scroll-view scroll-y
scroll-into-view="{{toView}}"
bindscroll="scrollTopFun"
style='height:100vh'
scroll-top="{{scrollTop.scroll_top}}"
scroll-with-animation="true"
>
<!-- 内容 -->
<view class='bg-white m-t10'>
<view class='flex'>
<view class='flex-1 f16 p-v text-center {{currentId === index? "active":""}}'
data-id="{{index}}" bindtap='navHandleClick'
wx:for="{{navietm}}" wx:key="{{index}}">{{item}}</view>
</view>
<view class='has-padding-sm'>
<!-- 实时停电信息 -->
<view>
<view class='m-t10' wx:for="{{navlist}}" wx:key="{{index}}">
<view class='itembox' id='{{item.id}}'>
<view class='titlebox flex'>
<view class='flex-1 text-ellipsis'>{{item.name}}</view>
<view class='f12'>
<text class='icon icon-like-o inline-middle'></text>
<text class='inline-middle m-l5'>加入关注</text>
</view>
</view>
<view class='itemconbox'>
<view class='flex c9'>
<view class='line m-r5 flex-1 self-middle'></view>
·<text class='p-w-sm'>昨天</text>·
<view class='line m-l5 flex-1 self-middle'></view>
</view>
<view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
<view class='border-line-b flex text-bold p-t5 p-b5'>
<view class='flex-1'>
<image src='../../images/date.png' class='ico-date inline-middle'></image>
<text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
</view>
<view>电网故障停限电</view>
</view>
<view class='p-w-sm p-v-sm'>
<view>
<text class='text-bold m-r10 c-11A99A'>送电时间:</text>
<text class='f12 c6'>2018-09-13 16:15:00</text>
<text class='label bg-A5A5A5'>预计</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停电范围:</text>
<text class='f12 c6'>[开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停电区域:</text>
<text class='f12 c6'>湖南省长沙市开福区</text>
</view>
</view>
</view>
</view>
<view class='itemconbox'>
<view class='flex c9'>
<view class='line m-r5 flex-1 self-middle'></view>
·<text class='p-w-sm'>昨天</text>·
<view class='line m-l5 flex-1 self-middle'></view>
</view>
<view class='bg-white p-w-sm radius-sm m-t5' bindtap="togglePopup">
<view class='border-line-b flex text-bold p-t5 p-b5'>
<view class='flex-1'>
<image src='../../images/date.png' class='ico-date inline-middle'></image>
<text class='inline-middle m-l10'>2018-09-12 22:15:00</text>
</view>
<view>电网故障停限电</view>
</view>
<view class='p-w-sm p-v-sm'>
<view>
<text class='text-bold m-r10 c-11A99A'>送电时间:</text>
<text class='f12 c6'>2018-09-13 16:15:00</text>
<text class='label bg-A5A5A5'>预计</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停电范围:</text>
<text class='f12 c6'>[开福区] 湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、湘江世纪城、</text>
</view>
<view>
<text class='text-bold m-r10 c-11A99A'>停电区域:</text>
<text class='f12 c6'>湖南省长沙市开福区</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='text-center p-t10 f12 c9'>
没有更多信息了
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 导航 -->
<view class='nav-fixed' wx:if="{{scrollTop.goTop_show}}"> <!-- 滚动到离顶部一定距离在显示导航按钮 -->
<view class='navitembtn shadow {{isnavfixed ? "":"navitembtned"}}' catchtap='navfixedHandleClick'>导航</view>
<view class='navconbox' hidden='{{isnavfixed}}'>
<view class='floor gotop' catchtap='gotop'>返回顶部</view>
<view class='floor' bindtap='clickScroll' data-id="{{item.id}}"
wx:for="{{navlist}}" wx:key="{{index}}">
{{item.name}}
</view>
</view>
</view>Page({
data: {
isnavfixed:true, //是否显示浮动导航
toView:'', //显示区域
navlist: [//地区数据
{
id:"list0",
name:'市区河东'
},
{
id: "list1",
name: '市区河西'
},
{
id: "list2",
name: '长沙县'
},
{
id: "list3",
name: '望城区'
},
{
id: "list4",
name: '浏阳市'
},
{
id: "list5",
name: '宁乡市'
}
],
scrollTop: {//竖直滚动的位置
scroll_top: 0,
goTop_show: false
}
},
navfixedHandleClick(){
// 浮动导航
this.setData({
isnavfixed: !this.data.isnavfixed
});
},
scrollTopFun: function (e) {
// 页面滚动到一定位置显示导航
if (e.detail.scrollTop > 200) {
this.setData({
'scrollTop.goTop_show': true
});
} else {
this.setData({
'scrollTop.goTop_show': false
});
}
},
gotop(){
//返回顶部,
var _top = this.data.scrollTop.scroll_top;
_top == 1 ? _top = 0 : _top = 1
this.setData({
'scrollTop.scroll_top': _top,
'isnavfixed':true
});
console.log(this.data.scrollTop);
},
clickScroll: function (e) {
//点击导航菜单滚动
var toView = e.currentTarget.dataset.id
this.setData({
"toView": toView,
'isnavfixed': true
})
}
})主要用到 scroll-view 组件 scroll-into-view 属性；当点击导航菜单的时候，我们改变相应的 scroll-into-view 的值，并且同时需要在 scroll-view 组件内相应位置处的子元素上定义相应的 id；因为scroll-into-view 值应为某子元素 id，设置哪个方向可滚动，则在哪个方向滚动到该元素。
scroll-view 组件使用的一些注意点：
1. scroll-into-view 与 上面提到的子元素id 不能以数字开头
2.bindscroll 属性 实时监听滚动 ； 如上面 页面滚动到一定位置显示导航按钮功能
3.scroll-top 、scroll-left 属性： 设置竖向或者横向滚动条位置，如上面 返回顶部 功能
4.scroll-with-animation 属性：滚动平滑过渡，提高体验
5.如果需要隐藏 scroll-view 的滚动条使用 css ::-webkit-scrollbar{width: 0;height: 0;color: transparent;}
6.如果scroll-view占页面整个高度，可设置 scroll-view的高度 height:100vh , 设置height:100%无效
上述就是小编为大家分享的怎么在微信小程序中实现一个锚点功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
