uniapp--小程序,H5开发:滚动组件scroll-view

我们经常需要做页面中部分内容可以滚动的功能，例如“猜你喜欢”，内容太多，通常都会超出屏幕，那么此块区域应该可以滚动，但是顶部的自定义导航栏应该不能随着滚动。

这个时候，就可以使用uniapp提供的滚动组件scroll-view。

一、滚动组件 scroll-view

APP-vue和小程序中，请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。更新：微信基础库2.4.4起支持了原生组件在scroll-view、swiper、movable-view 中的使用。app-nvue无此限制。

scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面，长列表应该使用list而不是scroll-view。

scroll-into-view 的优先级高于 scroll-top。

scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。

若要使用下拉刷新，建议使用页面的滚动，而不是 scroll-view。插件市场有前端模拟的基于scroll-view的下拉刷新，但性能不佳。如必需使用前端下拉刷新，推荐使用基于wxs的下拉刷新，性能会比基于js监听方式更高。

scroll-view的滚动条设置，可通过css的-webkit-scrollbar自定义，包括隐藏滚动条（app-nvue无此css）

• 官方文档

二、滚动组件使用示例

1、主要代码示例

1）将需要滚动的内容放入scroll-view组件中，并设置竖向滚动scroll-y

复制

2）设置样式，页面高度 100%，设置flex布局，让scroll-view撑满剩余空间

page{
  background-color: #fefefe;
  display: flex;
  height: 100%;
  flex-direction: column;
  flex-flow: column;
}
 
.scroll-view {
  flex: 1;
  overflow: hidden;
}复制

3）添加滚动触底事件 @scrolltolower，并设置ts类型UniHelper.ScrollViewOnScrolltolowerEvent

const onScrolltolower =(e : UniHelper.ScrollViewOnScrolltolowerEvent)=>{
  console.log('到底部了',e);
}复制

4）添加猜你喜欢测试组件my-guess

 
 
  
 
 
 
.caption {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    .text {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #efefef;
    margin: 5rpx;
    .guess-item {
        width: 334rpx;
        padding: 10rpx;
        margin: 10rpx;
        overflow: hidden;
        background-color: #fff;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .image {
            width: 304rpx;
            height: 260rpx;
        }
        .name {
            height: 75rpx;
            margin: 10rpx 0;
            font-size: 26rpx;
            color: #262626;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            display: -webkit-box;
        }
        .small {
            width: 100rpx;
            height: 100rpx;
        }
        .text {
            font-size: 26rpx;
            color: #666;
        }
    }
}复制

3、扩展：使用ref属性调用子组件my-guess的方法加载更多数据

1）在index.vue中定义ref

 
 
 
 
import type { MyGuessInstance } from '@/components/components';
import { ref } from 'vue'
 
const guessRef = ref<MyGuessInstance>()
const onScrolltolower =(e : UniHelper.ScrollViewOnScrolltolowerEvent)=>{
  console.log('到底部了');
  guessRef.value?.getMore()
}
 复制

2）定义组件实例类型

// src\components\components.d.ts
export type MyGuessInstance = InstanceType复制

3）定义远程接口事件，以及对象类型

// src\types\global.d.ts
export type PageResult={
    /**列表数据 */
    items:T[]
    /**总条数 */
    coounts:number
    /**当前页数 */
    page:number
    /**总页数 */
    pages:number
    /**每页条数 */
    pageSize:number
}
// src\types\home.d.ts
export type GuessItem = {
    /**商品描述 */
    desc: string
    id: string
    /** 商品折扣 */
    discount: number
    /** 商品已下单数量 */
    orderNumber: number
    /** 商品名称 */
    name: string
    /** 商品图片 */
    picture: string
    /** 商品价格 */
    price: number
}
// src\services\home.ts
export const getHomeGuessAPI = () => {
    return http>({
        method: 'GET',
        url: ""
    })
}复制

4）组件my-guess暴露方法getMore

 
import { getHomeGuessAPI } from '@/services/home';
import type { GuessItem } from '@/types/home';
import { ref } from 'vue';
 
const guessList = ref<GuessItem[]>([])
const getNextPageGuess=async ()=>{
   console.log('加载更多....');
   const res = await getHomeGuessAPI()
   guessList.value = res.data.items
}
// 暴露方法
defineExpose({
    getMore:getNextPageGuess
})
 复制

效果预览