注意这是两个案列。

当然可以自行抽丝剥茧。

--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 文件

<!--index.wxml-->
<view class="page-wrap">
  <!-- <button class="go" bindtap="go">click test</button> -->
  <scroll-view 
  class="left-scroll-view-section" 
  scroll-with-animation 
  scroll-y="{{true}}"
  bindscroll="scrollfunc"
  scroll-into-view="{{wordID}}"
  >
    <view class="scroll-outside-item " wx:for="{{somedata}}" wx:for-item="item" id="k-{{index}}" data-index="{{index}}">
      <view class="key-box">{{item.word}}</view>
      <view class="key-list border-btm {{cell.cur?'cur':''}}" bindtap="godetail" wx:for="{{item.list}}" wx:for-item="cell">
        <view class="left">{{cell.name}} {{cell.cur}}</view>
        <view class="right">{{cell.phone}}</view>
      </view>
    </view> 
  </scroll-view>

  <view class="word-section">
    <view class="word-val" data-id="{{item.word}}" bind:tap="wordclickfunc" 
      wx:for="{{somedata}}" 
      data-index="{{index}}"
      >
      {{item.word}}
    </view>
  </view>


  <view class="ab-mask-tips" wx:if="{{tips.isShowTips}}">
    a
  </view>
  
  
</view>

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

<!--pages/detail/detail.wxml-->
<view class="detail-page">
  <button bindtap="clickfun1">点击事件1</button>
</view>