小程序scoll-view锚点定位:
<view class='flex content section'>
// 左边栏布局
<view class='left'>
<view catchtap='anchor' data-opt='zhichangUp' class="item {{ toTab=='zhichangUp'?'active':'' }}">
<text class='iconfont iconxuexi'></text>
<text>职场提升</text>
</view>
<view catchtap='anchor' data-opt='code' class="item {{ toTab=='code'?'active':'' }}">
<text class='iconfont iconjianzhu'></text>
<text>编程与开发</text>
</view>
<view catchtap='anchor' data-opt='data' class="item {{ toTab=='data'?'active':'' }}">
<text class='iconfont iconxinshuai'></text>
<text>数据科学</text>
</view>
<view catchtap='anchor' data-opt='product' class="item {{ toTab=='product'?'active':'' }}">
<text class='iconfont iconyunying'></text>
<text>产品运营</text>
</view>
<view catchtap='anchor' data-opt='design' class="item {{ toTab=='design'?'active':'' }}">
<text class='iconfont iconyunying'></text>
<text>设计创意</text>
</view>
<view catchtap='anchor' data-opt='commerce' class="item {{ toTab=='commerce'?'active':'' }}">
<text class='iconfont iconyunying'></text>
<text>电商运营</text>
</view>
<view catchtap='anchor' data-opt='language' class="item {{ toTab=='language'?'active':'' }}">
<text class='iconfont iconyunying'></text>
<text>语言学习</text>
</view>
</view>
// 右边栏布局
<view class='right flex_1'>
<!-- scroll-into-view锚点定位 -->
// scroll-into-view 绑定定位id(id与上面按钮的id一致)
<scroll-view scroll-into-view="{{ toTab }}" scroll-y="true" scroll-with-animation="true" class='scroll'>
<view class='item_title bottom_link' id='zhichangUp'>职场提升</view>
<view class='items flex_c'>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
</view>
<view class='item_title bottom_link' id='code'>编程与开发</view>
<view class='items flex_c'>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
</view>
<view class='item_title bottom_link' id='data'>数据科学</view>
<view class='items flex_c'>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
</view>
<view class='item_title bottom_link' id='product'>产品运营</view>
<view class='items flex_c'>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
</view>
<view class='item_title bottom_link' id='design'>设计创意</view>
<view class='items flex_c'>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
</view>
<view class='item_title bottom_link' id='commerce'>电商运营</view>
<view class='items flex_c'>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
</view>
<view class='item_title bottom_link' id='language'>语言学习</view>
<view class='items flex_c'>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
<view class='item'>考试认证</view>
<view class='item'>编程语言</view>
<view class='item'>系统运维</view>
<view class='item'>web开发</view>
<view class='item'>其他</view>
</view>
</scroll-view>
</view>
</view>
scroll-into-view="{{ toTab }}" scroll-y=“true” scroll-with-animation=“true”
scroll-into-view :绑定元素定位id(id与上面按钮的id一致)
scroll-y:滚动方向
scroll-with-animation:滚动动画
data: {
toTab: 'zhichangUp'
},
anchor: function (options) {
var tab = options.currentTarget.dataset.opt
var that = this
that.setData({
toTab: tab
})
},
js代码,添加tab切换事件,将当前opt(id)值赋值给toTab,触发事件便可实现锚点定位
/* pages/src/page/pxClass.wxss */
page {
height: 100%;
}
.content {
align-items: flex-start;
position: relative;
height: 100%;
}
.content .left {
position: relative;
top: 0;
bottom: 0;
height: 100%;
width: 210rpx;
font-size: 24rpx;
color: #999;
border-right: 2rpx solid #f0f0f0;
}
.content .left .item {
padding: 20rpx;
padding-right: 0;
}
.content .left .item.active {
background-color: #5283db;
color: #fff;
}
.content .left .item .iconfont {
font-size: 38rpx;
margin-right: 8rpx;
}
.content .left .item .iconfont.iconxinshuai {
font-size: 32rpx;
}
.content .right {
position: absolute;
left: 210rpx;
top: 0;
right: 0;
bottom: 0;
padding-left: 20rpx;
flex-wrap: wrap;
font-size: 26rpx;
color: #4a4a4a;
overflow: scroll;
}
.content .right .item_title {
font-size: 32rpx;
font-weight: bold;
padding: 40rpx 0;
}
.content .right .items {
padding: 36rpx 36rpx 0 0;
flex-wrap: wrap;
}
.content .right .items .item {
line-height: 28rpx;
box-sizing: border-box;
padding: 18rpx 20rpx;
background-color: #ececec;
margin: 0 20rpx 20rpx 0;
border-radius: 4rpx;
width: 142rpx;
text-align: center;
}
.scroll {
height: 100%;
}
css代码,记得将scoll-view的高设为100%,否则锚点定位不生效
官网连接:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html