微信小程序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.jsPage({  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(){    // 页面关闭  }})