注意这是两个案列。
当然可以自行抽丝剥茧。
--2019-12-05更新------------------------------------------------------------------------------------
wocao。。。有赞有更厉害的效果
https://youzan.github.io/vant-weapp/#/index-bar
首先先说 仿照IOS通讯录字母索引
（有个瑕疵，目前不支持右侧字母触摸滑动，只能手指点击交互）
先来感受下IOS原生的 字母索引
留意顶部A B C 等字母在滑动中置顶的奇妙效果。
2019-09-22 223529.gif
没错，这种神奇的黏着效果，小程序也可以实现啦！
右侧字母 还支持点击铆定到相对应的区块。
2019-09-22 224046.gif
总体思路
wxml结构上，外层需要用一个 固定定位 高宽100%；
的 scroll-view包起来，采用y轴，即纵向滚动。
给每个scroll-item设定一个 id，注意，id不能以数字开头
希望用字母开头，也不要用单词开头！
比如id的正确的写法是 ：a-1 这种单个字母开头的，不要用 abc-1 ，等单词模式开头（貌似有坑！）
那么样式上如何实现 字母黏着的效果，其实特别简单
position: sticky;
position: -webkit-sticky;
top:0;
left:0;
是不是很出乎意料，以为要用js来运算滚动高度，然后各种切换类名，来实现？真相是只用css就可以实现这种黏着的效果。
点击字母索引的js，就是点击字母，去匹配视图的id，用scroll-view的方法
scroll-into-view去匹配id
接着放出代码
wxml 文件
{{item.word}}
{{cell.name}} {{cell.cur}}
{{cell.phone}}
{{item.word}}
a
wxss
/**index.wxss**/
page{
height: 100%;
/* background: red; */
}
.page-wrap{
min-height: 100%;
/* background: green; */
}
.left-scroll-view-section{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.scroll-outside-item{
border-bottom: 1px solid white;
}
.key-box{
background: #eee;
padding: 10rpx 10rpx 10rpx 20rpx;
font-size: 22rpx;
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
z-index: 400;
}
.key-list{
background: white;
padding: 10rpx;
display: flex;
justify-content: space-between;
padding: 28rpx 80rpx 28rpx 20rpx;
/* border-bottom: 1px solid #eee; */
position: relative;
}
/* .key-list::after{
content: '';
position: absolute;
width: 100%;
height: 1px;
border-top: 1px solid #e5e5e5;
bottom: 0;
left: 0;
transform: scaleY(0.5);
} */
.word-section{
position: fixed;
top: 50%;
right: 16rpx;
transform: translate(0,-50%);
z-index: 500;
}
.word-val{
font-size: 26rpx;
margin-bottom: 12rpx;
color: blue;
font-weight: bold;
text-align: center;
}
.ab-mask-tips{
position: fixed;
padding: 40rpx;
border-radius: 20rpx;
background: rgba(0, 0, 0, 0.6);
color: white;
font-size: 40rpx;
font-weight: bold;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.border-btm::after{
position: absolute;
content: '';
height: 1px;
width: 100%;
border-top: 1px solid #e3e3e3;
bottom:0;
left: 0;
transform: scaleY(0.5);
}
.key-list.cur{
background: red;
}
.go{
position: fixed;
top: 100rpx;
right: 100px;
z-index: 700;
}
js
//index.js
//获取应用实例
const app = getApp()
var timer = null;
Page({
data: {
motto: 'Hello World',
wordID:0,
tips:{
isShowTips:false,
value:'0'
},
somedata:[
{
word:'A',
list:[
{
name:'阿波罗',
cur:false,
id:12223,
phone:13902939239
},
{
name:'阿波罗',
cur:false,
id:123323,
phone:13902939239
},
{
name:'阿波罗',
cur:false,
id:12423,
phone:13902939239
},
{
name:'阿波罗',
cur:false,
id:11223,
phone:13902939239
},
{
name:'阿波罗',
cur:false,
id:12623,
phone:13902939239
}
]
},
{
word:'B',
list:[
{
name:'菠萝派',
cur:false,
id:12723,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:12823,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:12923,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:124223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:126423,
phone:13902939239
}
]
},
{
word:'C',
list:[
{
name:'菠萝派',
cur:false,
id:122093,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:166223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:122883,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:122773,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:124523,
phone:13902939239
}
]
},
{
word:'D',
list:[
{
name:'菠萝派',
cur:false,
id:122333,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:190223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:122323,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:112223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:131223,
phone:13902939239
}
]
},
{
word:'E',
list:[
{
name:'菠萝派',
cur:false,
id:122563,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:122893,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:229063,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:123023,
phone:13902939239
}
]
},
{
word:'G',
list:[
{
name:'菠萝派',
cur:false,
id:3223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:4223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:8223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:99223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:90223,
phone:13902939239
}
]
},
{
word:'I',
list:[
{
name:'菠萝派',
cur:false,
id:231223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:901223,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:23,
phone:13902939239
},
{
name:'菠萝派',
cur:false,
id:67,
phone:13902939239
},
{
id:90,
name:'菠萝派',
cur:false,
phone:13902939239
}
]
},
]
},
func1(){
console.log('打印了一句话')
},
godetail(){
wx.navigateTo({
url: '../detail/detail',
})
},
wordclickfunc(e){
console.log(e);
let index = e.currentTarget.dataset.index;
console.log(index);
this.setData({
wordID:'k-'+index,
'tips.isShowTips':true
})
clearTimeout(timer)
timer = setTimeout(() => {
this.setData({
'tips.isShowTips':false
})
}, 1000);
console.log(this.data.wordID,'id')
},
go(){
console.log('click go btn')
let arr = this.data.somedata;
arr.forEach((v, i) => {
v.list.map((v2, i2) => {
if (v2.id == 12223) {
v2.cur = true;
}
})
})
this.setData({
somedata:arr
})
console.log(this.data.somedata)
}
})
仿照ios索引的说完了，接着在分享一个，那就是，子页面，如何唤起首页的数据更新
就是说我们在子页，又是需要在完成某个逻辑之后，通知首页进行数据更新，一般情况下，像vue 它可以通过子组件emit等行为抛出一个事件 ，让父组得以进行相对应的操作。
然乎正常来说小程序可没这个方法。
但是它有其他的方法来实现。
position: sticky; 其他用法展示 （适合多种项，滚动时候， 需要吸顶的场景）非常顺滑
55455ca719769ecb5a58d7e4eb476372_20190923182619.gif
先看案例：：
我的首页有个 方法，点击 “click test”按钮 匹配第一条数据高亮。
2019-09-22 230746.gif
思考
假如我进入子页，并且完成了某些逻辑后，在返回的首页的同时，就要通知首页调用这个“click test”的事件方法。
效果如是：
2019-09-22 231616.gif
就是利用 页面栈
getCurrentPages() 来实现
代码如下
detail.js
// pages/detail/detail.js
Page({
/**
* 页面的初始数据
*/
data: {
},
clickfun1(){
console.log('详情页点击事件');
let pages = getCurrentPages();
console.log(pages,'页面')
let len = pages.length;
let nextPage = pages[len-2];
nextPage.go();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
detail.wxml