2019最新填坑微信小程序 scroll-view 滚动条保持在底部（附效果demo）

今天药忘吃喽~ 2022-02-17 00:09 942阅读 0赞

![在这里插入图片描述][20190418152428302.gif_pic_center]  
注意：

1.  `<scroll-view>` 必须有高度 , 如果想要滚动条保持在底部 , 高度必须等于窗口的高度
2.  `scroll-y='{ {true}}'` 必须定义元素允许纵向滚动
3.  `scroll-top='{ {scrollTop}}'` 最后就是定义滚动条位置要求：`scrollTop` 必须大于 `<scroll-view>` 内所有元素之和

<view>
      <scroll-view style='height:{ { height}}px' scroll-y='{ {true}}' scroll-top='{ {scrollTop}}'>
        <view wx:for="{ {dataArr}}" wx:for-item> {
       {index}}: {
       {item}}</view>
      </scroll-view>
    </view>

*  以下为js代码

// pages/test/test.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        dataArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        scrollY: true,
        scrollTop: 0,
        height:0
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function(options) { 
        var that = this
        //获取当前窗口高度返回给页面使用
        var height = wx.getSystemInfoSync().windowHeight;
        //设置data数据
        that.setData({ 
          scrollTop: that.data.dataArr.length * 1000,
          height:height
        })
        console.log(that.data.scrollTop)
      },
    })

[20190418152428302.gif_pic_center]: /images/20220217/7814fd74bfa449fd93d82c4e56f565b8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，942人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序 - 底部导航栏配置demo（tabBar）

"tabBar":{ "list":[ { "text":"每周推荐",/显示的文本/

水深无声/ 2023年02月27日 13:55/ 0 赞/ 35 阅读

相关微信小程序 2019 入坑手册

微信小程序差不多已经推出了两年半的时间，对于还没有入坑或刚准备动手的开发同学，本文档将尝试在几分钟内让你快速的了解其基本开发生态，虽嫌蜻蜓点水零零碎碎，但应该可对接下来的开发做

怼烎@/ 2022年10月01日 05:49/ 0 赞/ 422 阅读

相关微信小程序-滚动消息通知效果

这次我主要想总结一下[微信小程序][Link 1]实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。　　我们通过vertic

阳光穿透心脏的1/2处/ 2022年06月11日 08:20/ 0 赞/ 291 阅读

相关微信小程序服务端获取UnionId填坑

小程序能够获取到unionid的前提： ![在这里插入图片描述][20190418123502344.png] 1. 小程序`必须`绑定`在微信开放平台`上，不绑定报

桃扇骨/ 2022年04月24日 07:02/ 0 赞/ 311 阅读

相关微信小程序之----去掉小程序的滚动条

代码 .v1::-webkit-scrollbar { width: 0; height: 0; color: transpare

偏执的太偏执、/ 2022年04月15日 04:29/ 0 赞/ 706 阅读

相关微信小程序（11）——去除滚动条

[微信小程序（十）——利用scroll-view实现横向滚动][scroll-view]讲了如何实现scroll-view的横向滚动，在实现滚动之后，发现有一个横向的滚动条存在

电玩女神/ 2022年03月20日 14:56/ 0 赞/ 1606 阅读

相关 2019最新填坑微信小程序 scroll-view 滚动条保持在底部（附效果demo）

![在这里插入图片描述][20190418152428302.gif_pic_center] 注意： 1. `<scroll-view>` 必须有高度 , 如果想要滚动

今天药忘吃喽~/ 2022年02月17日 00:09/ 0 赞/ 943 阅读

相关微信小程序设置滚动条

<scroll-view scroll-y="true" style="height: 200px">

素颜马尾好姑娘i/ 2022年01月26日 14:17/ 0 赞/ 726 阅读

相关 vue保持滚动条在底部

mounted() { this.scrollToBottom(); }, updated: function () { this.

柔光的暖阳◎/ 2021年12月21日 08:33/ 0 赞/ 302 阅读

相关微信小程序 - 页面隐藏滚动条

// 滚动条隐藏 ::-webkit-scrollbar { width: 0; height: 0; color: tr

蔚落/ 2021年07月27日 01:56/ 0 赞/ 566 阅读