微信小程序scroll-view高度设置及scroll-into-view的使用跳转

布局是左边导航栏，右边可上下滑动的子类表。
用到组件：scroll-view
第一个误区：height不能使用百分百。（实践可用百分百。不必要非用rpx或者px）
目前完成了点击添加索引class显示效果，及右侧分类跳转相应位置。

classfiy.wxml

<!--classfiy.wxml-->
<import src="../templates/search" />
<import src="../templates/classfiy-list" />
<template is="search"></template>
<view class="classfiy-nav" id="classfiy-nav">
  <block wx:for="{{classfiyNav}}">
      <view class="nav-list {{id==index ? 'active' : ''}}"  bindtap="tabClassfiy" id="nav-{{index}}" >
          <text>{{item.text}}</text>
      </view>
  </block>
</view>
<view class="classfiy-list clearfix">
  <template is="classfiy" data="{{classfiyList, id}}"></template>
</view>

classfiy-list.wxml

<template name="classfiy">
<scroll-view scroll-y="true"  scroll-with-animation="true" scroll-into-view**="list-{{id}}" id="scroll-list">
    <view class="classfiy-list-sm clearfix"  id="list-{{index}}" wx:for="{{classfiyList}}" >
      <view class="classfiy-all">{{item.text}}</view>
      <block wx:for="{{item.list}}" wx:for-item="list">
          <view class="nav-list-con fl">
              <image src="{{list.img}}"></image>
              <text>{{list.text}}</text>
          </view>   
      </block>
    </view>
  </scroll-view>
</template>

classfiy.wxss
使用了固定定位 确保百分比生效。没来得及优化。

/* pages/classfiy/classfiy.wxss */
.head-mask {
    opacity: 1;
}
page {
    margin-top:90rpx;
}
.classfiy-nav {
    margin-top: 90rpx;
    height: 100%;
    float: left;
    position: fixed;
    left: 0;
    top: 0;
    width: 200rpx;
    background: #e6e6e6;
    text-align: center;
}
.classfiy-nav .nav-list {
     border-bottom: 1px solid #ccc;
}
.classfiy-nav text {
    font-size: 28rpx;
    line-height: 100rpx;

}
/* 这里就是右侧分类列表使用height百分比。保证scroll-into-view生效。其中height使用了计算是为了弥补搜索框固定定位占据的高度。可忽略。核心是外层壳子有100%高度。内部既可以使用100%*/
.classfiy-list {
    margin-top: 110rpx;
    position: fixed;
    right: 0;
    top: 0;
    width: calc(100% - 200rpx);
    height: calc(100% + 120rpx);
    float: right;
    text-align: center;
    font-size: 24rpx;
}
.nav-list.active {
  background: #fff;
  border-left: 3px solid #ff8000;
  box-sizing: border-box;
}
#scroll-list {
  height: 100%;
}
.nav-list-con {
    width: 33%;
    padding: 30rpx;
    box-sizing: border-box;
}
.nav-list-con image {
    margin-bottom: 10rpx;
    width: 100%;
    height: 120rpx;
}
.classfiy-all {
    margin-left: 12%;
    width: 80%;
    margin-top: 30rpx;
    margin-bottom: 15rpx;
    line-height: 60rpx;
    background: #c91523;
    color: #fff;
}

classfiy.js

// pages/classfiy/classfiy.js
Page({
  data:{
    id: 0,
    classfiyNav: [
      {
        "text": "1"
      },
      {
        "text": "2"
      },
      {
        "text": "3"
      },
      {
        "text": "4"
      },
      {
        "text": "5"
      },
      {
        "text": "6"
      },
      {
        "text": "7"
      },
      {
        "text": "8"
      }
    ],
    classfiyList: [
      {
        "text": "进入1频道 >",
        // 示例格式
         "list": [ 
            {
                  "img": "xxxxxx",
                  "text": "xxxxxx"
            }
           ]
          }
    ]
  },
  tabClassfiy: function (e) {
    var that = this;
    var index = e.currentTarget.id.slice(4);
    that.setData({
      id: index
    })
  }
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
      // 页面渲染完成
  },
  onShow:function(){
    // 页面显示

  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})