智能小程序 Ray 开发实践——视图容器组件 ScrollView 介绍

最新推荐文章于 2024-10-06 20:16:20 发布

IoT砖家涂拉拉

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量1.3k

点赞数 20

文章标签： java 开发语言小程序 App 物联网 iot API

本文链接：https://blog.csdn.net/Ms_Smart/article/details/137883043

版权

本文详细介绍了Ray.js库中的ScrollView组件，包括其滚动方向控制、滚动条位置设置、自定义下拉刷新功能以及各种事件处理函数。提供了示例代码以展示如何在小程序中使用这些属性。

摘要由CSDN通过智能技术生成

ScrollView

滚动容器

导入

import { ScrollView } from '@ray-js/ray';

属性说明

属性	类型	默认值	说明	支持平台
scrollX	boolean	false	允许横向滚动	涂鸦、微信
scrollY	boolean	false	允许纵向滚动	涂鸦、微信
scrollTop	number		设置竖向滚动条位置	涂鸦、微信
scrollLeft	number		设置横向滚动条位置	涂鸦、微信
scrollWithAnimation	boolean		在设置滚动条位置时使用动画过渡	涂鸦、微信
upperThreshold	number	50	距顶部/左边多远时，触发 onScrollToUpper 事件	涂鸦、微信
lowerThreshold	number	50	距底部/右边多远时，触发 onScrollToLower 事件	涂鸦、微信
refresherEnabled	boolean	false	开启自定义下拉刷新 `@ray-js/ray>=0.9.3`	涂鸦、微信
refresherThreshold	number	45	设置自定义下拉刷新阈值 `@ray-js/ray>=0.9.3`	涂鸦、微信
refresherDefaultStyle	string	'black'	设置自定义下拉刷新默认样式，支持设置 black、white、none， none 表示不使用默认样式 `@ray-js/ray>=0.9.3`	涂鸦、微信
refresherBackground	string	'#FFF'	设置自定义下拉刷新区域背景颜色 `@ray-js/ray>=0.9.3`	涂鸦、微信
refresherTriggered	boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 `@ray-js/ray>=0.9.3`	涂鸦、微信
onRefresherpulling	func(event: { type: 'refresherpulling'; origin: any })		自定义下拉刷新控件被下拉时触发 `@ray-js/ray>=0.9.3`	涂鸦、微信
onRefresherrefresh	func(event: { type: 'refresherrefresh'; origin: any })		自定义下拉刷新被触发时触发 `@ray-js/ray>=0.9.3`	涂鸦、微信
onRefresherrestore	func(event: { type: 'refresherrestore'; origin: any })		自定义下拉刷新被复位时触发 `@ray-js/ray>=0.9.3`	涂鸦、微信
onRefresherabort	func(event: { type: 'refresherabort'; origin: any })		自定义下拉刷新被中止时触发 `@ray-js/ray>=0.9.3`	涂鸦、微信
onScrollToUpper	func(event: { type: 'scrolltoupper'; direction: 'top' or'left'; origin: any })		滚动到顶部/左边时触发	涂鸦、微信
onScrollToLower	func(event: { type: 'scrolltolower'; direction: 'bottom' or 'right'; origin: any })		滚动到底部/右边时触发	涂鸦、微信
onScroll	func(vent: { type: 'scroll'; scrollLeft: number; scrollTop: number; scrollHeight: number; scrollWidth: number; deltaX: number; deltaY: number; origin: any })		滚动时触发	涂鸦、微信

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

示例代码

HorizontalScroll

import React from 'react';
 
import { ScrollView, View } from '@ray-js/components';
 
function hls() {
  return Math.floor(Math.random() * 55) + 200;
}
 
function randomColor() {
  return `rgb(${hls()},${hls()},${hls()})`;
}
 
function onScroll(event: any, type: string) {
  console.log(event, type);
}
 
function onScrollToLower() {
  console.log('触【底】了');
}
 
function onScrollToUpper() {
  console.log('触【顶】了');
}
 
const itemStyle = {
  width: '200rpx',
  height: '667rpx',
  display: 'inline-block',
};
 
export default function HorizontalScroll() {
  return (
    <ScrollView
      style={{
        width: '702rpx',
        height: '667rpx',
        backgroundColor: '#fff',
        whiteSpace: 'nowrap',
      }}
      scrollX
      onScroll={(event) => onScroll(event, 'X')}
      onScrollToLower={onScrollToLower}
      onScrollToUpper={onScrollToUpper}
    >
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
      <View style={{ backgroundColor: randomColor(), ...itemStyle }} />
    </ScrollView>
  );
}

VerticalScroll

import React from 'react';
 
import { ScrollView, View } from '@ray-js/components';
 
function hls() {
  return Math.floor(Math.random() * 55) + 200;
}
 
function randomColor() {
  return `rgb(${hls()},${hls()},${hls()})`;
}
 
function onScroll(event: any, type: string) {
  console.log(event, type);
}
 
function onScrollToLower() {
  console.log('触【底】了');
}
 
function onScrollToUpper() {
  console.log('触【顶】了');
}
 
export default function VerticalScroll() {
  return (
    <ScrollView
      style={{ width: '702rpx', height: '667rpx', backgroundColor: '#fff' }}
      scrollY
      scrollTop={100}
      onScroll={(event) => onScroll(event, 'Y')}
      onScrollToUpper={onScrollToUpper}
      onScrollToLower={onScrollToLower}
    >
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
      <View style={{ height: '200rpx', backgroundColor: randomColor() }} />
    </ScrollView>
  );
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。