首页 >> js开发 >> js微信小程序实现锚点跳转js大全
js微信小程序实现锚点跳转js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例为大家分享了微信小程序实现锚点跳转的具体代码，供大家参考，具体内容如下1、先上效果图，看看是不是你想要的。2、主要用到的微信小程序的scroll-view 组件实现该效果。核心主要是使用scroll-into-view属性跳转对应的标签页和标签内容区域和bindscroll事件监听标签内容区域距离页面顶部的距离来判断顶部的标签应该处于哪个标签。3、wxml代码：
1标签
2标签
3标签
4标签
5标签
1标签对应内容区域
2标签对应内容区域
3标签对应内容区域
4标签对应内容区域
5标签对应内容区域
1标签
2标签
3标签
4标签
5标签
1标签对应内容区域
2标签对应内容区域
3标签对应内容区域
4标签对应内容区域
5标签对应内容区域
.text{
width: 100%;
display: flex;
flex-direction: column;
}
.scroll-x-view {
width: 100%;
display: flex;
flex: 1;
}
.scroll-x-view .scroll-view-item {
margin-top: 50rpx;
width: 750rpx;
height: 800rpx;
display:inline-block;
}
.bg_red {
background: lightpink;
}
.bg_blue {
background: lightblue;
}
.bg_green {
background: lightgreen;
}
.bg_yellow {
background: lightyellow;
}
.scroll-x-view1 {
width: 100%;
height: 100rpx;
white-space: nowrap;
}
.scroll-x-view1 .scroll-view-item1 {
width: 400rpx;
height: 100rpx;
display:inline-block;
}
.text{
width: 100%;
display: flex;
flex-direction: column;
}
.scroll-x-view {
width: 100%;
display: flex;
flex: 1;
}
.scroll-x-view .scroll-view-item {
margin-top: 50rpx;
width: 750rpx;
height: 800rpx;
display:inline-block;
}
.bg_red {
background: lightpink;
}
.bg_blue {
background: lightblue;
}
.bg_green {
background: lightgreen;
}
.bg_yellow {
background: lightyellow;
}
.scroll-x-view1 {
width: 100%;
height: 100rpx;
white-space: nowrap;
}
.scroll-x-view1 .scroll-view-item1 {
width: 400rpx;
height: 100rpx;
display:inline-block;
}5、js代码：
Page({
/**
* 页面的初始数据
*/
data: {
// 标签锚点跳转值
indexMaodian: 'a',
// 标签详情内容锚点跳转
storeDetail: 'a1'
},
// 监听页面滑动距离
onPageScroll(e) {
// 通过滑动的距离判断页面滑动那个区域让后让顶部的标签栏切换到对应位置
var height = Number(e.detail.scrollTop)
if (height <= 400) {
// 滑到1区域
this.setData({
indexMaodian: 'a'
});
} else if (height > 400 && height<= 800) {
// 滑到2区域
this.setData({
indexMaodian: 'b'
});
} else if (height > 800 && height <= 1200) {
// 滑到3区域
this.setData({
indexMaodian: 'c'
});
} else if (height > 1200 && height <= 1600) {
// 滑到4区域 后面难得写了，以此类推即可
this.setData({
indexMaodian: 'd'
});
}
},
// 跳转到对应的标签详情内容区
toDetail(e) {
let id = e.target.dataset.id
this.setData({
storeDetail: id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
var windowHeight = systemInfo.windowHeight;
// 拿到导航栏以下可视区域的高度
this.setData({
height: windowHeight
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
Page({
/**
* 页面的初始数据
*/
data: {
// 标签锚点跳转值
indexMaodian: 'a',
// 标签详情内容锚点跳转
storeDetail: 'a1'
},
// 监听页面滑动距离
onPageScroll(e) {
// 通过滑动的距离判断页面滑动那个区域让后让顶部的标签栏切换到对应位置
var height = Number(e.detail.scrollTop)
if (height <= 400) {
// 滑到1区域
this.setData({
indexMaodian: 'a'
});
} else if (height > 400 && height<= 800) {
// 滑到2区域
this.setData({
indexMaodian: 'b'
});
} else if (height > 800 && height <= 1200) {
// 滑到3区域
this.setData({
indexMaodian: 'c'
});
} else if (height > 1200 && height <= 1600) {
// 滑到4区域 后面难得写了，以此类推即可
this.setData({
indexMaodian: 'd'
});
}
},
// 跳转到对应的标签详情内容区
toDetail(e) {
let id = e.target.dataset.id
this.setData({
storeDetail: id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
var windowHeight = systemInfo.windowHeight;
// 拿到导航栏以下可视区域的高度
this.setData({
height: windowHeight
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})以上就是本文的全部内容，希望对大家的学习有所帮助。
.text{
width: 100%;
display: flex;
flex-direction: column;
}
.scroll-x-view {
width: 100%;
display: flex;
flex: 1;
}
.scroll-x-view .scroll-view-item {
margin-top: 50rpx;
width: 750rpx;
height: 800rpx;
display:inline-block;
}
.bg_red {
background: lightpink;
}
.bg_blue {
background: lightblue;
}
.bg_green {
background: lightgreen;
}
.bg_yellow {
background: lightyellow;
}
.scroll-x-view1 {
width: 100%;
height: 100rpx;
white-space: nowrap;
}
.scroll-x-view1 .scroll-view-item1 {
width: 400rpx;
height: 100rpx;
display:inline-block;
}
.text{
width: 100%;
display: flex;
flex-direction: column;
}
.scroll-x-view {
width: 100%;
display: flex;
flex: 1;
}
.scroll-x-view .scroll-view-item {
margin-top: 50rpx;
width: 750rpx;
height: 800rpx;
display:inline-block;
}
.bg_red {
background: lightpink;
}
.bg_blue {
background: lightblue;
}
.bg_green {
background: lightgreen;
}
.bg_yellow {
background: lightyellow;
}
.scroll-x-view1 {
width: 100%;
height: 100rpx;
white-space: nowrap;
}
.scroll-x-view1 .scroll-view-item1 {
width: 400rpx;
height: 100rpx;
display:inline-block;
}5、js代码：
Page({
/**
* 页面的初始数据
*/
data: {
// 标签锚点跳转值
indexMaodian: 'a',
// 标签详情内容锚点跳转
storeDetail: 'a1'
},
// 监听页面滑动距离
onPageScroll(e) {
// 通过滑动的距离判断页面滑动那个区域让后让顶部的标签栏切换到对应位置
var height = Number(e.detail.scrollTop)
if (height <= 400) {
// 滑到1区域
this.setData({
indexMaodian: 'a'
});
} else if (height > 400 && height<= 800) {
// 滑到2区域
this.setData({
indexMaodian: 'b'
});
} else if (height > 800 && height <= 1200) {
// 滑到3区域
this.setData({
indexMaodian: 'c'
});
} else if (height > 1200 && height <= 1600) {
// 滑到4区域 后面难得写了，以此类推即可
this.setData({
indexMaodian: 'd'
});
}
},
// 跳转到对应的标签详情内容区
toDetail(e) {
let id = e.target.dataset.id
this.setData({
storeDetail: id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
var windowHeight = systemInfo.windowHeight;
// 拿到导航栏以下可视区域的高度
this.setData({
height: windowHeight
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
Page({
/**
* 页面的初始数据
*/
data: {
// 标签锚点跳转值
indexMaodian: 'a',
// 标签详情内容锚点跳转
storeDetail: 'a1'
},
// 监听页面滑动距离
onPageScroll(e) {
// 通过滑动的距离判断页面滑动那个区域让后让顶部的标签栏切换到对应位置
var height = Number(e.detail.scrollTop)
if (height <= 400) {
// 滑到1区域
this.setData({
indexMaodian: 'a'
});
} else if (height > 400 && height<= 800) {
// 滑到2区域
this.setData({
indexMaodian: 'b'
});
} else if (height > 800 && height <= 1200) {
// 滑到3区域
this.setData({
indexMaodian: 'c'
});
} else if (height > 1200 && height <= 1600) {
// 滑到4区域 后面难得写了，以此类推即可
this.setData({
indexMaodian: 'd'
});
}
},
// 跳转到对应的标签详情内容区
toDetail(e) {
let id = e.target.dataset.id
this.setData({
storeDetail: id
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
var windowHeight = systemInfo.windowHeight;
// 拿到导航栏以下可视区域的高度
this.setData({
height: windowHeight
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章:
- jsvue3.0+vue-router+element-plus初实践js大全
- js基于vue项目设置resolves.alias: '@'路径并适配webstormjs大全
- js代码在实例中重学JavaScript事件循环
- js如何正确解决VuePress本地访问出现资源报错404的问题js大全
- js代码javascript中导出与导入实现模块化管理教程
- jsJS闭包原理及其使用场景解析js大全
- jsJavascript新手入门之字符串拼接与变量的应用js大全
- jsVue router安装及使用方法解析js大全
- jsvue基于Echarts的拖拽数据可视化功能实现js大全
- JavaScript通过实例解析js可枚举属性与不可枚举属性
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
