小程序 scroll-view

苏洛荨

于 2019-09-25 17:17:27 发布

阅读量176

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_15936309/article/details/101374282

版权

小程序专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1 保证成功要注意的点：

1 <button class="weui-btn" formType="submit" id="{{id}}">下一步</button>

2 <scroll-view style="height: 100%;" scroll-y="true" scroll-into-view="{{id}}" scroll-with-animation="true">

3 <view id="name" class="tui-list-head">name</view>

4 .tui-fixed-y{
width: 100%;
height: calc(100% - 80rpx);
position: fixed;
bottom: 0;
left: 0;
}

2 上完整代码：（在上面这些点满足的基础上，只要把 "{{id}}" 的id 设为动态变量即可）

.wxml

<form bindsubmit='formSubmit'>
  <button class="weui-btn" formType="submit" id="{{id}}">下一步</button>
<!--列表滚动区  -->
<view class="tui-fixed-y">
  <scroll-view style="height: 100%;" scroll-y="true" scroll-into-view="{{id}}" scroll-with-animation="true">
    <view>
      <view id="name" class="tui-list-head">name</view>
      <view class="tui-list-li">name 列表</view>
    </view>
     <view>
      <view id="phone" class="tui-list-head">phone</view>
      <view class="tui-list-li">phone 列表</view>
    </view>
     <view>
      <view id="add" class="tui-list-head">add</view>
      <view class="tui-list-li">add 列表</view>
    </view>
     <view>
      <view id="age" class="tui-list-head">age</view>
      <view class="tui-list-li">age 列表</view>
    </view>
  </scroll-view>
</view>
</form>

.js

Page({
  data: {
    id:"age"
  },

  formSubmit: function (e) {
    this.setData({ id: "add" })
    console.log(this.data.id)
  }
})

.wxss

.tui-fixed-y{
  width: 100%;
  height: calc(100% - 80rpx);
  position: fixed;
  bottom: 0;
  left: 0;
}
.tui-list-head{
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30rpx;
  color: blue;
}
.tui-list-li{
  height: 400px;
  padding: 10rpx;
  color: #fff;
  font-size: 50rpx;
  background-color: #2EB3FF;
}