CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-better-scroll--mouse-wheel

A TypeScript plugin for BetterScroll that provides enhanced mouse wheel scrolling capabilities with configurable speed, direction, easing, and boundary damping on PC platforms.

Overall
score

98%

Overview
Eval results
Files

task.mdevals/scenario-4/

Mobile News Feed with Pull-to-Refresh

Build a mobile-friendly news feed web application that implements pull-to-refresh functionality to load new content.

Capabilities

Pull-to-Refresh Functionality

  • When the user pulls down from the top of the feed by 50 pixels or more, a refresh callback is triggered to load new items @test
  • After new items are loaded successfully, the pull-down loading indicator closes and the feed returns to normal position @test
  • The pull-to-refresh feature can be programmatically triggered without user interaction @test

Implementation

@generates

API

/**
 * Initializes the news feed with pull-to-refresh functionality
 * @param container - The DOM element that will contain the scrollable news feed
 * @param options - Configuration options for the feed
 * @returns An object with methods to control the news feed
 */
export function initNewsFeed(
  container: HTMLElement,
  options: NewsFeedOptions
): NewsFeedController;

interface NewsFeedOptions {
  /** Callback function to fetch new news items, should return a Promise that resolves when items are loaded */
  onRefresh: () => Promise<void>;
  /** Initial array of news items to display */
  initialItems: NewsItem[];
}

interface NewsItem {
  id: string;
  title: string;
  content: string;
  timestamp: number;
}

interface NewsFeedController {
  /** Programmatically trigger a refresh */
  refresh(): void;
  /** Destroy the news feed and clean up resources */
  destroy(): void;
  /** Add new items to the top of the feed */
  prependItems(items: NewsItem[]): void;
}

Dependencies { .dependencies }

better-scroll { .dependency }

Provides smooth scrolling with pull-to-refresh support for mobile web applications.

@satisfied-by

Install with Tessl CLI

npx tessl i tessl/npm-better-scroll--mouse-wheel

tile.json