微信小程序-scroll-view根据锚点滚动相应楼层展示

// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { titleList:['a','b','c','d','e','f','g','h'], contentList:[ {key:'a',row:[ {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'a_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, {key:'b',row:[ {name:'b_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'b_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'b_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'b_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, {key:'c',row:[ {name:'c_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'c_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'c_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'c_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, {key:'d',row:[ {name:'d_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'d_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'d_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'d_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, {key:'e',row:[ {name:'e_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'e_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'e_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'e_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, {key:'f',row:[ {name:'f_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'f_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'f_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'f_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, {key:'g',row:[ {name:'g_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'g_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'g_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'g_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, {key:'h',row:[ {name:'h_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'h_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'h_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, {name:'h_1',img:'https://img0.baidu.com/it/u=2739021267,3346074790&fm=253&fmt=auto&app=120&f=PNG?w=512&h=512'}, ] }, ], titleIndex:0, currentKey:"a", is_margin:true }, changeId(e){ //传给子元素 通过子元素调用达到改变颜色的地步 //顺便改变key值利用scroll-view这个标签从而进行一些切换 let { id } = e.detail; //console.log(key) //console.log(id,"===========") this.setData({ titleIndex:id }) }, changekey(e){ let {key}=e.detail; this.setData({ currentKey: key }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })