ni 文档中 scroll-view 说明

可滚动视图区域，用于区域滚动。使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给 scroll-view 添加 white-space: nowrap; 样式。

微信小程序文档中 scroll-view 说明

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

场景一：布局中已知高度局部滚动

一般页面布局中某个模块需要局部滚动，以横向滚动更多，纵向滚动其实也类似。这个也是 scroll-view 最简单的用法，纵向滚动直接设置一个已知的固定高度 height 就行了，没啥难度。

场景二：整个布局上、中、下3个模块布局，中间局部滚动

常见整个页面布局，需要中间部分直接自适应屏幕然后局部滚动。这个实现稍微难一点：

• js 实现：直接获取到屏幕的整个高度，然后减去上下模块的高度就是中间的 scroll-view 高度了。

// 获取屏幕可用高度
let screenHeight = uni.getSystemInfoSync().windowHeight

• css 实现：外层盒子直接 flex 布局，主轴改为 column 纵向，然后中间部分在 scroll-view 标签外面再套一个div，这个div 的 flex 设为 1 自动设置高度，然后 scroll-view 的 height 设为 100%。不过注意最外层的盒子一定要是已知高度的，像整个页面这种其实也是已知高度，否则无效。

<template>
  <div class="page">
    <div class="top" />
    <div class="center">
      <scroll-view style="height: 100%;"></scroll-view>
    </div>
    <div class="bottom" />
  </div>
<template>
<style>
.page {
  display: flex;
  flex-direction: column;
}

.top {
  height: 100px;
  background: green;
}

.bottom {
  height: 100px;
  background: red;
}

.center {
  flex: 1;
}
</style>

场景三：未知高度局部滚动

这个就有点难度了，其实就是我们 pc 上常用的设置最大高度 max-height，如果超过了最大高度则出现滚动条，很不幸在小程序这种方式滚动不了。

一般用在弹窗中比较多，设置一个固定高度确实可以实现，但是内容较少时会出现大量留白，用纯 css 我是没找到实现方式，因为需要动态获取到内容的高度才知道要给 scroll-view 设置多高。

<template>
  <div class="pop">
    <div class="header">我是标题</div>
    <scroll-view :style="'height:' + height + 'px'">
      <div id="scroll-content"></div>
    </scroll-view>
    <div class="footer">确定</div>
  </div>
<template>
<script>
export default {
  data() {
    return {
      height: 200 // 默认滚动高度
    }
  },
  mounted() {
    // 实际弹窗中应该是在弹窗显示时去计算高度，此处仅作示例，获取不到节点信息可以放到 $nextTick 中去获取
    this.calcHeight()
  },
  methods: {
    calcHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#scroll-content').boundingClientRect(res => {
        const h = res ? res.height : 0
        let height = this.height
        if (h > 0 && h <= this.height) {
          // 感觉获取到的 res.height 和实际的有大约 39px 误差，所以自己减去一点
          height = (h > 19) ? (h - 19) : h
        }

        this.height = height
      }).exec()
    }
  }
}
</script>

注意 createSelectorQuery 在自定义组件中要加上 in(this)

者 | 大澈

大家好，我是大澈！

又是好久没更文了，前阵子驾着新车回了趟老家，很“幸运”的经历了平原县地震的余波。

回想当时，半夜凌晨，房屋晃动，如同身处过山车，一切都很不真实。虽然震感时间很短暂，但是现在依旧让我记忆犹新，人类在大自然面前真的是太渺小了，很多时候真的是力不从心。

所以，真心想和大家说一句，生活不易，及时行乐，珍惜身边人，且行且珍惜。

ONE

需求分析，问题描述

一、需求

一个可以滚动的菜单，为它添加一个可以下拉滚动的提示。要求滚动到菜单最底部时，隐藏下拉滚动的提示，否则让其一直显示。

二、问题

1、如何实现滚动条效果？

2、如何判断是否滚动到底部？

TWO

解决问题，答案速览

实现代码如下，复制粘贴即可直接使用。

代码中滚动条的实现使用了element的el-scrollbar组件。组件中包裹的第一个div，指的是需要滚动的视图。组件中包裹的第二个div，指的是下拉滚动提示的图标，这里根据需求进行设置，可以更换静态的或者那种闪烁跳跃的动态提示图标。

// 1、模版
<el-scrollbar max-height="calc(100vh - 84px)" @scroll="handleScroll" ref="myScrollbar">
<div class="sideBarIn"></div>
<div class="pcSign pcIcon" v-if="isShowIcon">
<img class="iconImg" src="../assets/images/common/xiaGery.png"></div>
</el-scrollbar>


// 2、逻辑
// 滚动条事件
const handleScroll = (val) => {
// 防止Scrollbar实例为空
if (!myScrollbar.value) {
return
}

// 判断是否滚动到底部
let isScrollToEnd = Number(myScrollbar.value.wrapRef.scrollTop.toFixed(0)) 
+ Number(myScrollbar.value.wrapRef.clientHeight.toFixed(0))
=== Number(myScrollbar.value.wrapRef.scrollHeight.toFixed(0));

if (isScrollToEnd) {
// 滚动到底部的处理逻辑
isShowIcon.value = false
} else {
// 非滚动到底部的处理逻辑
isShowIcon.value = true
}
}


// 3、样式
.pcIcon {
width:100%;
height: 100px;
position: absolute;
bottom: -4px;
left: 0;
text-align: center;
line-height: 130px;
background: linear-gradient(to bottom, rgba(234, 234, 234, 0.5), rgba(234, 234, 234, 1));

.iconImg {
width: 20px;
height: 20px;
}
}
.pcSign{
display: block;
}

THREE

问题解析，知识总结

一、如何实现滚动条效果？

实现滚动条效果有两种实现方式：利用css的overflow: scroll属性、利用element的el-scrollbar组件。

1、overflow: scroll属性

在div元素上添加 overflow-y: scroll; css属性，就能显示出一个滚动条，如果不指定是x或y轴，则水平和垂直都会出现滚动条。

当然，前提是你需要指定div元素的高度或者最大高度。

2、el-scrollbar组件

一般在vue项目中，我们可直接使用element的el-scrollbar组件，因为官方为我们提供了许多API，以及各种适配优化。

el-scrollbar组件的属性如下：

el-scrollbar组件的事件如下：

el-scrollbar组件的实例属性如下：

二、如何判断是否滚动到底部？

这里判断是否滚动到底部的关键在于scrollTop+clientHeight是否等于scrollHeight的值。只有当滚动的距离+可视区域的高度，与scrollHeight相等时，才证明滚动条滚动到了底部。

同样的，如果scrollHeight与可视区域的高度直接就相等时，又说明元素不可以滚动，也就没有滚动条。这一点在有此需求时，可以进行实用。

元素的几个宽高属性释义如下：

- END -

题：

横向滚动条不显示；el-table 只有竖向滚动条拉到最底部时，才显示横向滚动条；

要达到效果：

不用竖向滚动条到底部，即可实现横向条显示；

主要设置：

1. 设置el-table 外层css
2. 设置el-table css

具体实现：

<template>

<div >

<el-row style="height: 300px;width: 800px;">

<el-table :data="tableData" style="width:100%" :height="400">

<el-table-column prop="date" label="日期" width="100" fixed>

</el-table-column>

<el-table-column prop="name" label="姓名" width="100">

</el-table-column>

<el-table-column prop="address" label="地址" width="100">

</el-table-column>

<el-table-column prop="date" label="日期" width="100">

</el-table-column>

<el-table-column prop="name" label="姓名" width="300">

</el-table-column>

<el-table-column prop="address" label="地址">

</el-table-column>

<el-table-column prop="date" label="日期">

</el-table-column>

<el-table-column prop="name" label="姓名">

</el-table-column>

<el-table-column prop="name" label="姓名" width="100" fixed="right">

</el-table-column>

</el-table>

</el-row>

</div>

</template>

<script>

export default {

components: {},

data () {

return {

tableData: [{

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1517 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1519 弄'

}, {

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1516 弄'

},

{

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1517 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1519 弄'

}, {

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1516 弄'

},

{

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1517 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1519 弄'

}, {

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1516 弄'

},

]

};

},

computed: {},

watch: {},

created () {

},

mounted () {

},

methods: {

},

}

</script>

<style >

</style>

如上设置即可实现所需效果；