本文实例为大家分享了微信小程序实现滚动导航效果的具体代码，供大家参考，具体内容如下
效果图
实现原理
采用双 scroll-view 组件实现双滚动！
WXML
WXSS
.tui-fixed-y{
width: 100%;
height: calc(100% - 80rpx);
position: fixed;
bottom: 0;
left: 0;
}
.tui-city-scroll-y{
padding: 0 20rpx;
height: 100%;
box-sizing: border-box;
}
.tui-list-head{
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30rpx;
color: blue;
}
.tui-list-li{
height: 400px;
padding: 10rpx;
color: #fff;
font-size: 50rpx;
background-color: lightgreen;
}
width: 100%;
height: calc(100% - 80rpx);
position: fixed;
bottom: 0;
left: 0;
}
.tui-city-scroll-y{
padding: 0 20rpx;
height: 100%;
box-sizing: border-box;
}
.tui-list-head{
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30rpx;
color: blue;
}
.tui-list-li{
height: 400px;
padding: 10rpx;
color: #fff;
font-size: 50rpx;
background-color: lightgreen;
}
JS
注意
- scroll-view 组件如果横向滚动必须要有一个可视宽度，纵向滚动必须要有一个可视高度；
- 滚动的定位采用 scroll-view 组件的 scroll-into-view 属性，用 id 进行定位。
