序

写到scroll-view，就不得不涉及到其中的各个Object属性，但是这个控件本身又很奇特，属性内部经常自相矛盾，着实让人头疼不已，好记性不如烂笔头，记录下来警示自己，也帮助他人，何乐而不为呢。

正文

要想Scrolliew进行跳转，高度是必不可少的，但是这里的坑在于，高度太高（超出竖屏限制）之后，便会形成两个滚动条，用户若想查看底层的数据，就需要拉动两个条子，着实不友好，而想要进行跳转，高度又必须设置为一个给定的，具体的值（例如xxx rpx/vh/px），100%是不行的，因此我的建议是折中选择一个不超屏的高度，这样一个滚动条无疑友好了太多。

之后便是对内部属性的赋值，想要SV进行跳转，一个是设置scroll-into-view属性，一个是设置scroll-top属性，需注意scroll-into-view 的优先级高于scroll-top，因此两个属性是没必要同时出现的，SinV内的赋值应为子元素的id（且不可为单数字），而S-t无论是字符串或是数字都可以（数字的单位与height相同），而如若刚开始没有设定固定高度，那无论如何，这两个属性都是不起作用的。有些blog里面写属性必须动态赋值，实测不然（有可能版本更新了），只要有固定的高度，那么初始的赋值设置是绝对有效的。

一旦设置了上面的值，你的scroll-view就能进行跳转了，为了增加用户体验（bige），请记得加入scroll-with-animation属性来实现跳转的动画丝滑效果，以及加入搜索等各种子功能丰富页面设计，最后附上代码，如有建议，欢迎交流。

补充PS：由于设置子元素（指scroll-view）本身的高度可能会发生超出屏幕或长度不够的问题，在仔细研究后我找到了一个非常简易的解决方案，将scroll-view块使用view标签包裹并设置其absolute属性，定义bottom边为0，这样s-v的高度就可以设置为100%了（因为它继承了父元素的自适应高度），这样弄无疑比之前我所描述的方法更加灵活方便。

<wxml>

<scroll-view style='height:1000rpx;' scroll-into-view = "{{scrollid}}" class = "content-list" scroll-y = "true" scroll-with-animation = "true">
  <view class = "content-detail"  enable-flex = "true" style = "color: {{colorList[item.colorid]}}" wx:for = "{{recordList}}" wx:key = "item" data-id = "{{item.id}}" id = "item{{item.id}}" bindtap="gotoDetails">
        <view class = "content-name">{{item.userName}}</view>
        <view class = "content-state">{{item.status}}</view>
  </view>
</scroll-view>

<js>

toSearch: function (e) {
    var that = this;
    if(!this.data.searchContent) return;
    var searchKey = this.data.searchContent;
    var list = this.data.recordList
    for(let i = 0; i < list.length; i++){
      if(list[i].userName.indexOf(searchKey) >= 0){
        that.setData({
          scrollid: 'item' + i
        })
        console.log(this.data.scrollid)
        break;
      }
    }
  },