小程序模拟今日头条导航栏，点击锚点跳转对应楼层

使用场景，顶部导航的个数不确定，会有超出屏幕的情况，在一行展示，每点击一个导航的tab会判断是否向左或者像右滚动一个距离，以使当前的点击的导航能看到。同时点击导航会锚点跳转对应楼层，当前导航会变为激活状态。滚动屏幕，滚动到对应楼层，对应导航变为激活状态。

1.代码实现

1.1wxml

<!-- 楼盘相册 -->
<scroll-view class='xcnyTab' scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true"><view wx:for='{{xcnyHead}}' class='xcnyTabLi {{currentTab == index ? "on" : ""}}' data-current="{{index}}" bindtap='clickMenu'>{{item}}<view class='xcnyTabLi-line'></view></view>
</scroll-view>
<!-- 所有种类 -->
<scroll-view scroll-y style='height:{{ht}}px;' scroll-with-animation="true" bindscroll="scrollRight" scroll-into-view="{{toViewRt}}"><view class='xcnyAll'><!-- vr --><!-- a_type (vr: 11) (视频: 12)  (其他图片) --><block wx:for="{{xcnyList}}" wx:for-item="list" wx:for-index="listidx"><view class='xcnyAll-title' id='t{{listidx}}'>{{list.a_name}}</view><view class='xcnyAllList {{list.flag==1?"":"h523hidden"}}'><view class='xcnyAllList-wrap clearfix'><block><view class='xcnyAllLi' wx:for="{{list.a_photos}}" data-listidx="{{listidx}}" data-index="{{index}}" bindtap='godetail'><image class='xcnyAllLi-img' src='{{item.p_thumb}}'></image><!-- vr:11 --><view wx:if="{{list.a_type==11}}" class='xcnyAllLi-vr'></view><!-- 视频: 12 --><view wx:if="{{list.a_type==12}}" class='xcnyAllLi-video'></view></view></block><block wx:if="{{12<list.a_photos.length}}"><view class='xcnyAllLi-more' data-listidx="{{listidx}}" wx:if="{{!list.flag}}" bindtap='getmore'></view></block></view></view></block></view>
</scroll-view>

1.2wxss

.xcnyTab{width: 100%;white-space: nowrap;border-top: 1rpx solid #f1f1f1;border-bottom: 1rpx solid #f1f1f1;
}.xcnyTabLi{height: 80rpx;display: inline-block;width: 18.18%;text-align: center;position: relative;font-size: 28rpx;color: #404040;line-height: 80rpx;}.xcnyTabLi.on{color: #ff7500;
}.xcnyTabLi.on .xcnyTabLi-line{width: 36rpx;height: 5rpx;background-color: #ff7500;position: absolute;left: 50%;margin-left: -18rpx;top:60rpx;
}/* 所有种类 */
.xcnyAll{width: 716rpx;margin: 0 auto;
}.xcnyAll-title{font-size: 32rpx;color: #8a8a8a;line-height: 34rpx;padding-top: 40rpx;
}.xcnyAllList{width: 100%;overflow: hidden;margin-top: 25rpx;position: relative;
}.xcnyAllList.h523hidden{max-height: 523rpx;overflow: hidden;
}.xcnyAllList-wrap{width: 716rpx;
}.xcnyAllLi-more{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAXCAYAAADa+mvTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUzMTQzOTA3QzdEMzExRTlCRjA4QjNCNjc1NDI2QzRFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUzMTQzOTA4QzdEMzExRTlCRjA4QjNCNjc1NDI2QzRFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTMxNDM5MDVDN0QzMTFFOUJGMDhCM0I2NzU0MjZDNEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTMxNDM5MDZDN0QzMTFFOUJGMDhCM0I2NzU0MjZDNEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Hl6ueAAAEoElEQVR42sRajZGqMBDGGRvIK4EWeCVgCVwJWAKWACVICViClCAlSAlSgi/xfbnZ20tCAhEzs+MdQnazu9/+YZJ4rufzmUu6SaqSDZfkJ8C73Jq3p3yalJxnSRm5tjntA2QXkjJJ/VLDyI/ccUvG/haglO3T73a7gV07s+fXrkHyOAbq5kpkOH7KwfZQiFJaOXOvVqzywNpDIRfD852vQsmn2meSNCpnkvtOFmfIPqTDCiQgp6LacqbLu4XZwaBFgLJ9ViMVfzKgtLDcPwK9ShEH+Wy/MAK4Vo4zfs1FGYvTcH4VQJD66kTSaROE4oBflnsKUIsD9EDDgGsuhFEFpDPoL+HdwmF4tSaTwbURPAy7yJAqN8Ip9Kfmc4GhJkso7nC+doFImUmXa4qRTtJDeaNS8vP/qpH4H/heeO5XP+Osm4PHbaO9b9BJOlOknHF/tbDIUXyuIc/vLUgqCWJUCBwoavD/Ad53l38r72vl9dFh09bhbWfw8glJk2d4M0WBAogaLbnQtY5AZo/za/SpzwOTS3+X49zNQlxdIFcOe7SgyQdBJRD3JEgUNP/p6wzFFHnq+dKBeBPVxIuFL82gSJjyN74rLLI5EWrLowSxAiipEL20Dte2IgJ73rHnw9Ue6YM+mFEyh0JqU34h4VkzLSKGQtMSLoMa6Nuglu+DDcqMeiVKv4NP7D6zAh9qqx98dJXbkbK6IAnfFLJ6S+icSOGUy7B0YBWhsOw3LSkYLFX0bWX7otqtvx7VdEb68pzwnFiILb1DZNgqCOmitn91FxGVMqsMphTdiM+2Eb7tBJF9aQ51ngHRqTI4slZoaxg0tG8cNGSk3lHryzUp+hOw8SOwX6RTlS7gWV+nabjxkQJeBuVDD8jkM1ZsWO88GKIVHTRcYOjC0NaNK42ZMpSq/aZ9hAZbBBgkI31Z4kBLsqAKnZMrWyKzQR8nPsslyuWDhsJgzLVDhgy6KNgEqqGDBdO6QthYfW2JSZCAEJkJLQ7jVJEiRhfhLHouneIzJ7nMdZ6SjAiX5M2S8Wo5v32ywcLwXPe1Ryji5WmR36BcHPm4AN9mTY+rKliGwpEotp+JMIKiKSAylSyqNbae3mXQQ0DIfTi+156lBDiiKa+JMsaAUDMXEhv1qg38jlR+yDGaquPQOTVkGUnFXyTuN1EVotMQWCDpIm8C33ZOXy6D5jFCrgqpcp8jwusUgKilOTTXCpZ8T+Cv0XmJcJ7WkENzgqIjmxjVxKEPgeF2XIDoaPPQWwCP+p080GzfSfOtzxT9FZtjblsxGcSnXnCfLIOFGDNWEy/fkNsFRoWeoEN7e7y3F+azZIRnSubTTbLR2htK+WGFtwrfdocouX8DaniPNkDBZ+Rvnft+/foh8Kx6WkRJh9oGNCUbrn2kkdnSAUAXyXgZDJYyxY4YMjQwQMnHZvL6RIYE+hcHI6ZGI+HReRRpdGK0qSE5QmOHId/9YgwWBFO2LiR6WsAgarxQAwPlxPipwUDfoVIZFobPyfkGMvHRkeYjRvyRbj7BFFXna8458w6Vz1HVrxUay34JRdWKYcE32gzjw18pJebwJcb6J8AAooj0Qjt0jkQAAAAASUVORK5CYII=);background-repeat: no-repeat;background-position: center;background-size:116rpx 23rpx;position: absolute;right: 18rpx;bottom: 2rpx;width: 169rpx;height: 169rpx;background-color: gray;
}.xcnyAllLi{width: 165rpx;height: 165rpx;float: left;margin-right:14rpx;position: relative;margin-bottom: 14rpx;
}.xcnyAllLi-img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}.xcnyAllLi-vr,.xcnyAllLi-video{background-repeat: no-repeat;background-position: center;background-size:80rpx 80rpx;width:80rpx;height:80rpx;position: absolute;left: 50%;top: 50%;margin-left:-40rpx;margin-top:-40rpx;
}.xcnyAllLi-vr{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg0MTkxODQxQzdEMDExRTk5NzVBREU4MjExMjFEQkExIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg0MTkxODQyQzdEMDExRTk5NzVBREU4MjExMjFEQkExIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODQxOTE4M0ZDN0QwMTFFOTk3NUFERTgyMTEyMURCQTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODQxOTE4NDBDN0QwMTFFOTk3NUFERTgyMTEyMURCQTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ffvjIAAAPLElEQVR42uxd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);}.xcnyAllLi-video{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkEyNThDMzQ0QzdEMDExRTk4Q0I5OUY3QkQ2REJCOTNDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkEyNThDMzQ1QzdEMDExRTk4Q0I5OUY3QkQ2REJCOTNDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTI1OEMzNDJDN0QwMTFFOThDQjk5RjdCRDZEQkI5M0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTI1OEMzNDNDN0QwMTFFOThDQjk5RjdCRDZEQkI5M0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5Rj73TAAANI0lEQVR42uyd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);
}

3.js

var that;
var windowWidth = 0;
var windowHeight = 0;
// 滚动的高度
var scrolltop = 0;
Page({/*** 页面的初始数据*/data: {oldarr: [{a_name: "类目1",a_type: 11,a_photos: [{p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg",}],},{a_name: "类目2",a_type: 7,a_photos: [{p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}]},{a_name: "类目3",a_type: 7,a_photos: [{p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}]},{a_name: "类目4",a_type: 7,a_photos: [{p_thumb: "https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640"}]},{a_name: "类目5",a_type: 12,a_photos: [{p_thumb: "https://images.unsplash.com/photo-1551446591-142875a901a1?w=640"}]},{a_name: "类目6",a_type: 7,a_photos: [{p_thumb: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"}, {p_thumb: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"}, {p_thumb: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"}]},{a_name: "类目7",a_type: 7,a_photos: [{p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg"}]},{a_name: "类目8",a_type: 7,a_photos: [{p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"}, {p_thumb: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg"}]}],xcnyHead: [],xcnyList: [],tabScroll: 0,currentTab: 0,windowHeight: '',// 监听各个种类的距离顶部的高度element: [],},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {that = this;wx.getSystemInfo({ // 获取当前设备的宽高，文档有success: (res) => {windowWidth = res.windowWidth;windowHeight = res.windowHeight;that.setData({ht: (windowHeight - 41)});},});that.getphoto();},// 获取位置getTitleTop(scrolltop = 0, cb = '') {//获取导航的初始位置const query = wx.createSelectorQuery()query.selectAll('.xcnyAll-title').boundingClientRect();query.exec(function(res) {res = res[0]var arr = [];for (var i = 0; i < res.length; i++) {arr.push(res[i].top + scrolltop - 42)}that.setData({element: arr});});if (typeof cb == "function") {cb(scrolltop);}},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {that.setData({toViewRt: 't' + that.data.currentTab});},// 点击tabclickMenu: function(e) {//获取当前tab的indexvar current = e.currentTarget.dataset.current;var type = e.currentTarget.dataset.type;var tabWidth = windowWidth / 5;// 导航tab共5个，获取一个的宽度that.setData({tabScroll: (current - 2) * tabWidth //使点击的tab始终在居中位置})if (that.data.currentTab == current) {return false} else {that.setData({currentTab: current,toViewRt: 't' + current})}},// 滚动右侧菜单scrollRight(e) {scrolltop = e.detail.scrollTop;var element = that.data.element;var elementIndex = getTimeIndex(element, scrolltop);that.setData({currentTab: elementIndex,tabScroll: (elementIndex - 2) * (windowWidth / 5)});},// 效果图点击查看更多getmore(e) {var listidx = e.currentTarget.dataset.listidx;var key = 'xcnyList[' + listidx + '].flag'that.setData({[key]: 1}, () => {// 当全部展开时，需要重新获取各个楼层的高度that.getTitleTop(scrolltop);});},// 进入查看大图，a_type (vr: 11) (视频: 12)  (其他图片)godetail(e) {var listidx = e.currentTarget.dataset.listidx;var index = e.currentTarget.dataset.index;var xcnyList = that.data.xcnyList;// 类型var a_type = xcnyList[listidx].a_type;// 资源地址var url = xcnyList[listidx].a_photos[index].p_url;if (a_type == 11) {console.log()} else {console.log()}},// 楼盘相册getphoto() {var res = that.data.oldarr;console.log(res)if (res.length) {var xcnyHead = [];var xcnyList = [];for (var i = 0; i < res.length; i++) {if (res[i].a_photos.length) {res[i]['flag'] = 0;xcnyHead.push(res[i].a_name);xcnyList.push(res[i]);}}that.setData({xcnyHead: xcnyHead,xcnyList: xcnyList}, () => {// 获取位置//获取导航的初始位置that.getTitleTop();});}}
})// 判断在数组哪两项之间
function getTimeIndex(timeArr, time) {var timeIndex = -1;for (var i = 0; i < timeArr.length; i++) {if (timeArr[i] > time) {timeIndex = i - 1;break;}}return timeIndex;
}

1.4 效果

2.说明

2.1 思路：

2.1.1这里需要建立两层数组，外层（包含标题）和内层（内层需要循环的部分），先通过循环把外层标题提取出来组成顶部的导航栏；

2.1.2通过scroll-view布局，通过它实现锚点跳转。不同尺寸的屏幕，尺寸需要做一个换算，获取屏幕宽高对于现在的做一个适配；

2.1.3因为有展开动作（查看更多），所以当展开时需要重新计算元素距离顶部的高度，可以把获取高度封装为一个方法，最开始计算一次，点击展开和收起再计算一次；

2.1.3在滚动过程中需要判断当前滚动到第几个，从而计算顶部tab切换到第几个为激活状态；

2.1.4 在滚动到最底部时，并没有切换到最后一个是正常现象，没有到达它的条件；

2.2说明

2.2.1 触屏导航详见：https://blog.csdn.net/hangGe0111/article/details/88971087

小程序模拟今日头条导航栏，点击锚点跳转对应楼层相关推荐

vue仿今日头条_微信小程序仿今日头条导航栏滚动解析
项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll- ...
微信小程序开发错误——底部导航栏没有显示完全
微信小程序开发错误--底部导航栏没有显示完全原因:由于在app.json中设置跳转页面时,假设有A.B.C.D四个图标(点击可以跳转),B和C的跳转页面相同,C的图标就会覆盖B的图标,B的图标就相当 ...
微信小程序-仿今日头条客户端
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序. WordPre ...
html仿今日头条下拉刷新,小程序仿今日头条带滑动切换的文章列表
小程序仿今日头条带滑动切换的文章列表发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...
微信小程序实现自定义顶部导航栏（选项卡），固定导航栏和可滑动导航栏
微信小程序实现自定义顶部导航栏(选项卡),固定导航栏和可滑动导航栏固定导航栏可滑动导航栏顶部导航栏的需求实现: 顶部导航栏由列表渲染,通过tabclick点击事件改变activeIndex变量的 ...

小程序模拟今日头条导航栏，点击锚点跳转对应楼层

小程序模拟今日头条导航栏，点击锚点跳转对应楼层相关推荐

最新文章

热门文章

小程序 模拟今日头条导航栏，点击锚点跳转对应楼层

小程序 模拟今日头条导航栏，点击锚点跳转对应楼层相关推荐

最新文章

热门文章

小程序模拟今日头条导航栏，点击锚点跳转对应楼层

小程序模拟今日头条导航栏，点击锚点跳转对应楼层相关推荐