微信小程序首页界面+源码（示例一）

Page({ /** * 页面的初始数据 */ data: { show: false, // 自定义顶部状态显示与隐藏 barHeight: 20, // 顶部状态栏高度 navBarHeight: 66, // 顶部高度 viewHeight: 640, // 默认高度 navIndex: 0, tabList: [{ id: '1', src: '../../images/select.png', title: '菜单一' }, { id: '2', src: '../../images/sort.png', title: '菜单二' }, { id: '3', src: '../../images/select.png', title: '菜单三' }, { id: '4', src: '../../images/sort.png', title: '菜单四' } ], navList: [ [ [{ id: '1', path: 'pages/path1/index', // 具体需要跳转至该界面的路径 img: '../../images/msg.png', title: '功能一' }, { id: '2', path: 'pages/path2/index', img: '../../images/set.png', title: '功能二' }, { id: '3', path: 'pages/path3/index', img: '../../images/msg.png', title: '功能三' }, { id: '4', path: 'pages/path4/index', img: '../../images/set.png', title: '功能四' } ], [{ id: '5', path: 'pages/path5/index', img: '../../images/msg.png', title: '功能五' }, { id: '6', path: 'pages/path6/index', img: '../../images/set.png', title: '功能六' }, { id: '7', path: 'pages/path7/index', img: '../../images/msg.png', title: '功能七' }, { id: '8', path: 'pages/path8/index', img: '../../images/set.png', title: '功能八' }, ] ], [ [{ id: '9', path: 'pages/path9/index', img: '../../images/set.png', title: '功能A' }, { id: '10', path: 'pages/path10/index', img: '../../images/msg.png', title: '功能B' }, { id: '11', path: 'pages/path11/index', img: '../../images/set.png', title: '功能C' }, { id: '12', path: 'pages/path12/index', img: '../../images/msg.png', title: '功能D' } ], ] ], articleList: [{ content: '本创作分享给需要的用户使用，如存在不足之处，欢迎留言指正。', src: '../../images/money.jpeg', url: 'http://t.csdn.cn/316d5' }, { content: '点赞，收藏加关注，后续将编写更多示例，同大家分享。', src: '../../images/money.jpeg', url: 'http://t.csdn.cn/316d5' }, { content: '点赞，收藏加关注，后续出更完成版示例，同大家分享。', src: '../../images/money.jpeg', url: 'http://t.csdn.cn/316d5' }, ] }, // 页面滚动监听 onPageScroll(e) { if (e.scrollTop > 60) { this.setData({ show: true }) } else { this.setData({ show: false }) } }, // 扫描二维码监听 scanClick() { wx.scanCode({ success(res) { wx.showToast({ title: '扫码成功', }) }, fail: (err) => { wx.showToast({ title: '扫码失败', icon: 'error' }) } }) }, // 搜索监听 searchClick() { wx.showModal({ title: '温馨提示', content: '点击后应跳转至下一个搜索界面，此输入框仅仅为界面展示', showCancel: false, confirmText: '明白了' }) }, // 客服监听 serviceClick() { wx.showToast({ title: '您点击了客服监听', icon: 'none' }) }, // 客服监听 messageClick() { wx.showToast({ title: '您点击了消息监听', icon: 'none' }) }, // 滑动监听 moduleSelect(e) { this.setData({ navIndex: e.detail.current }) }, // 二级菜单监听 tabClick(e) { var code = e.currentTarget.dataset.id; wx.showToast({ title: '您点击了' + this.data.tabList[code - 1].title, icon: 'none' }) switch (code) { case '1': wx.navigateTo({ url: '菜单一跳转的路径地址', }) break; case '2': wx.navigateTo({ url: '菜单二跳转的路径地址', }) break; case '3': wx.navigateTo({ url: '菜单三跳转的路径地址', }) break; default: wx.navigateTo({ url: '菜单四跳转的路径地址', }) break; } }, // 功能菜单监听 navClick(e) { var info = e.currentTarget.dataset.item; wx.showToast({ title: '您点击了' + info.title, icon: 'none' }) wx.navigateTo({ url: info.path, }) console.log('需要跳转的路径地址：', info.path) }, // 通知信息监听 tipClick() { wx.showToast({ title: '记得点赞、收藏加关注哦', icon: 'none' }) wx.navigateTo({ url: '具体跳转的地址', }) }, // 模块监听 modelClick() { wx.showToast({ title: '更多demo，请关注我，持续更新中！', icon: 'none' }) wx.navigateTo({ url: '具体跳转的地址', }) }, // 科普文章监听 articleClick(e) { wx.showModal({ title: '温馨提示', content: '需要新建一个页面，放入标签：<web-view src="{{src}}"> </web-view>，其中src为此页面带过去的链接地址', showCancel: false, confirmText: '知道了' }) wx.navigateTo({ url: e.currentTarget.dataset.url, }) }, /** * 生命周期函数--监听页面加载 */ onLoad(o