### Initialize Novel Reader with Multiple Chapters

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Shows how to initialize the yingbing-ReadPage component with multiple chapters pre-loaded. This approach is recommended for a smoother reading experience, typically loading three chapters at once. It configures initial display settings and specifies the starting chapter.

```javascript
export default {
  data() {
    return {
      pageType: 'real',
      fontsize: 20,
      lineHeight: 15,
      color: '#333',
      bgColor: '#fcd281',
      slide: 40,
      enablePreload: true,
      noChapter: false
    }
  },
  onReady() {
    // Initialize with multiple chapters (recommended: load 3 chapters at once)
    let contents = [
      {
        chapter: 3,
        content: this.getContent(3),
        title: '第三章',
        isStart: false,
        isEnd: false
      },
      {
        chapter: 4,
        content: this.getContent(4),
        title: '第四章',
        isStart: false,
        isEnd: false
      },
      {
        chapter: 5,
        content: this.getContent(5),
        title: '第五章',
        isStart: false,
        isEnd: false
      }
    ];

    const { page } = this.$refs;
    page.init({
      contents: contents,
      start: 0,
      currentChapter: 4 // Start reading from chapter 4
    });
  },
  methods: {
    getContent(chapter) {
      // Return plain text content with \r\n line breaks
      return `Chapter ${chapter}\nYour novel content here...\nMore text...`;
    }
  }
}
```

--------------------------------

### Initialize Whole Book Mode in JavaScript

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Initializes the Uni-Reader component in 'whole book mode' for continuous reading without chapter divisions. This mode requires plain text content and allows setting a starting position and an optional title.

```javascript
export default {
  data() {
    return {
      noChapter: true, // Enable whole-book mode
      pageType: 'scroll',
      fontsize: 20,
      lineHeight: 15,
      color: '#333',
      bgColor: '#fcd281'
    }
  },
  onReady() {
    const { page } = this.$refs;
    page.init({
      content: this.getWholeBookContent(), // Plain text content only
      start: 0, // Starting position in the text
      title: 'My Novel Title' // Optional, used as default chapter name
    });
  },
  methods: {
    getWholeBookContent() {
      return `This is the entire novel content...\nAll chapters combined...\nContinuous reading...`;
    },

    // Jump to specific position in the book
    jumpToPosition(position) {
      const { page } = this.$refs;
      page.change({
        start: position
      });
    },

    // Event handler for auto-generated catalog
    setCatalog(catalog) {
      console.log('Auto-generated chapter catalog:', catalog);
      // Use this to build navigation menu
    }
  }
}
```

--------------------------------

### Integrate Pull-up Load with BetterScroll (JavaScript)

Source: https://github.com/yingbing-developer/uni-readpage/blob/master/uni_modules/yingbing-ReadPage/node_modules/@better-scroll/pull-up/README.md

This snippet demonstrates how to import and use the PullUp module with BetterScroll. It requires BetterScroll core and the PullUp plugin. The example shows initializing BetterScroll with the pullUpLoad option enabled.

```javascript
import BScroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
BScroll.use(PullUp)

const bs = new BScroll('.wrapper', {
  pullUpLoad: true
})
```

--------------------------------

### Initialize BetterScroll with Pull-down Refresh (JavaScript)

Source: https://github.com/yingbing-developer/uni-readpage/blob/master/uni_modules/yingbing-ReadPage/node_modules/@better-scroll/pull-down/README.md

Demonstrates how to import and use the Pulldown component with BetterScroll. Ensure BetterScroll core and the Pulldown plugin are installed and imported correctly. This code initializes a BScroll instance with pull-down refresh enabled.

```javascript
import BScroll from '@better-scroll/core'
import Pulldown from '@better-scroll/pull-down'
BScroll.use(Pulldown)

const bs = new BScroll('.wrapper', {
  pullDownRefresh: true
})
```

--------------------------------

### Initialize BetterScroll with Infinity Scroll (JavaScript)

Source: https://github.com/yingbing-developer/uni-readpage/blob/master/uni_modules/yingbing-ReadPage/node_modules/@better-scroll/infinity/README.md

Demonstrates how to initialize BetterScroll and enable the InfinityScroll plugin. It outlines the required imports and the configuration options for the infinity property, including fetch, render, and createTombstone functions.

```javascript
import BScroll from '@better-scroll/core'
import InfinityScroll from '@better-scroll/infinity'
BScroll.use(InfinityScroll)

const bs = new BScroll('.wrapper', {
  infinity: {
    fetch(count) {
      // Fetch data that is larger than count, the function is asynchronous, and it needs to return a Promise.
      // After you have successfully fetch the data, you need resolve an array of data (or resolve Promise).
      // Each element of the array is list data, which will be rendered when the render method executes。
      // If there is no data, you can resolve (false) to tell the infinite scroll list that there is no more data。
    },
    render(item, div) {
      // Rendering each element node, item is data, and div is a container for wrapping element nodes.
      // The function needs to return to the rendered DOM node.
    },
    createTombstone() {
      // Returns a tombstone DOM node.。
    }
  }
})
```

--------------------------------

### Handle Dynamic Chapter Loading with Callbacks

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Implements methods to dynamically load new chapters as the user progresses through the novel. It includes `loadmoreContent` for fetching the next chapter and `preloadContent` for pre-fetching subsequent chapters to ensure a seamless reading flow. Error handling callbacks are also demonstrated.

```javascript
export default {
  methods: {
    // Called when user needs to load a new chapter
    loadmoreContent(chapter, callback) {
      // Simulate API call to fetch chapter content
      setTimeout(() => {
        callback('success', {
          chapter: chapter,
          content: this.getContent(chapter),
          title: '第' + chapter + '章',
          isStart: chapter == 1,
          isEnd: chapter == 7
        });

        // Handle errors:
        // callback('fail');
        // callback('timeout');
      }, 2000);
    },

    // Preload multiple chapters for smoother reading experience
    preloadContent(chapters, callback) {
      setTimeout(() => {
        let contents = [];
        for (let i in chapters) {
          contents.push({
            chapter: chapters[i],
            start: 0,
            content: this.getContent(chapters[i]),
            title: '第' + chapters[i] + '章',
            isStart: chapters[i] == 1,
            isEnd: chapters[i] == 7
          });
        }
        callback('success', contents);

        // Handle errors:
        // callback('fail');
        // callback('timeout');
      }, 2000);
    },

    getContent(chapter) {
      return `Chapter ${chapter}\nYour novel text content...`;
    }
  }
}
```

--------------------------------

### Initialize yingbing-ReadPage Component in Vue

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Demonstrates how to integrate the yingbing-ReadPage component into a Vue template. It includes setting various display and behavior props and handling component lifecycle events for initialization and content loading.

```vue
<template>
  <view>
    <yingbing-ReadPage
      ref="page"
      :page-type="pageType"
      :font-size="fontsize"
      :line-height="lineHeight"
      :color="color"
      :bg-color="bgColor"
      :slide="slide"
      :enablePreload="enablePreload"
      :noChapter="noChapter"
      enableClick
      @clickTo="clickTo"
      @loadmore="loadmoreContent"
      @preload="preloadContent"
      @currentChange="currentChange"
      @setCatalog="setCatalog"
    ></yingbing-ReadPage>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageType: 'real', // Options: 'real', 'cover', 'scroll', 'none'
      fontsize: 20,
      lineHeight: 15,
      color: '#333',
      slide: 40,
      bgColor: '#fcd281',
      enablePreload: true,
      noChapter: false
    }
  },
  onReady() {
    const { page } = this.$refs;
    let contents = [{
      chapter: 1,
      content: "Your novel text content here...\nWith line breaks and paragraphs",
      title: 'Chapter 1',
      isStart: true,
      isEnd: false
    }];

    page.init({
      contents: contents,
      start: 0,
      currentChapter: 1
    });
  }
}
</script>
```

--------------------------------

### Initialize Better-Scroll Core

Source: https://github.com/yingbing-developer/uni-readpage/blob/master/uni_modules/yingbing-ReadPage/node_modules/@better-scroll/core/README.md

Demonstrates how to import and initialize the BetterScroll core component. It requires a DOM element selector and an optional configuration object.

```javascript
import BScroll from '@better-scroll/core'

const bs = new BScroll('.wrapper', {/* ... */})
```

--------------------------------

### Dynamic Style Configuration for Reading Appearance

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Manages real-time updates to reading appearance settings such as font size, line height, text color, and background color. This configuration is essential for creating a user-friendly and customizable reading experience.

```javascript
export default {
  data() {
    return {
      pageType: 'real',
      fontsize: 20,
      lineHeight: 15,
      color: '#333',
      bgColor: '#fcd281',
      slide: 40
    }
  },
  methods: {
    // Increase font size
    increaseFontSize() {
      this.fontsize += 2;
      // Component automatically refreshes with new font size
    },

    // Decrease font size
    decreaseFontSize() {
      this.fontsize -= 2;
    },

    // Change page turning mode
    switchPageMode() {
      // Options: 'real' (realistic flip), 'cover', 'scroll', 'none'
      this.pageType = this.pageType == 'real' ? 'scroll' : 'real';
    },

    // Apply night mode theme
    applyNightMode() {
      this.color = '#c5c5c5';
      this.bgColor = '#1a1a1a';
    },

    // Apply day mode theme
    applyDayMode() {
      this.color = '#333333';
      this.bgColor = '#fcd281';
    },

    // Adjust line spacing
    adjustLineHeight(change) {
      this.lineHeight += change;
    },

    // Adjust page margins
    adjustMargins(change) {
      this.slide += change;
    }
  }
}
```

--------------------------------

### Navigate Between Chapters in JavaScript

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Enables programmatic navigation between chapters and specific positions within the Uni-Reader. The `changeChapter` method demonstrates how to load new chapter content and update the current chapter setting.

```javascript
export default {
  methods: {
    // Jump to a different chapter
    changeChapter(targetChapter) {
      let contents = [
        {
          chapter: targetChapter - 1,
          content: this.getContent(targetChapter - 1),
          title: `Chapter ${targetChapter - 1}`,
          isStart: false,
          isEnd: false
        },
        {
          chapter: targetChapter,
          content: this.getContent(targetChapter),
          title: `Chapter ${targetChapter}`,
          isStart: false,
          isEnd: false
        },
        {
          chapter: targetChapter + 1,
          content: this.getContent(targetChapter + 1),
          title: `Chapter ${targetChapter + 1}`,
          isStart: false,
          isEnd: false
        }
      ];

      const { page } = this.$refs;
      page.change({
        contents: contents,
        start: 0,
        currentChapter: targetChapter
      });
    },

    getContent(chapter) {
      return `Chapter ${chapter} content...`;
    }
  }
}
```

--------------------------------

### Click Zone Configuration for Interactive Areas

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Defines and configures interactive click areas, often used for settings menus or controls within the reading interface. This allows for precise placement and sizing of tappable regions.

```javascript
export default {
  data() {
    return {
      clickOption: {
        width: uni.upx2px(200),  // Click area width in px
        height: uni.upx2px(200), // Click area height in px
        left: 'auto',            // 'auto' centers horizontally, or use number for px
        top: 'auto'              // 'auto' centers vertically, or use number for px
      }
    }
  },
  methods: {
    clickTo() {
      // Called when user clicks the defined area
      console.log('Click zone activated');

      // Show settings panel
      this.showSettingsPanel = true;
    },

    // Configure custom click zone position to top-right
    setClickZoneTopRight() {
      this.clickOption = {
        width: 100,
        height: 100,
        left: uni.getSystemInfoSync().windowWidth - 100,
        top: 0
      };
    }
  }
}
```

--------------------------------

### Track Reading Progress in JavaScript

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Monitors reading progress and current page information within the Uni-Reader. This method logs details about the current chapter, reading position, and page numbers, and includes a function to save the progress.

```javascript
export default {
  methods: {
    currentChange(currentInfo) {
      console.log('Current chapter:', currentInfo.chapter);
      console.log('Reading start position:', currentInfo.start);
      console.log('Reading end position:', currentInfo.end);
      console.log('Current page text:', currentInfo.text);
      console.log('Total pages in chapter:', currentInfo.totalPage);
      console.log('Current page number:', currentInfo.currentPage);
      console.log('Chapter title:', currentInfo.title);

      // Save reading progress
      this.saveProgress({
        chapter: currentInfo.chapter,
        start: currentInfo.start,
        end: currentInfo.end
      });

      // Update UI with page numbers
      this.displayPageNumber = `${currentInfo.currentPage}/${currentInfo.totalPage}`;
    },

    saveProgress(progress) {
      // Persist to local storage or backend
      uni.setStorageSync('reading_progress', progress);
    }
  }
}
```

--------------------------------

### Insert Custom HTML Content in JavaScript

Source: https://context7.com/yingbing-developer/uni-readpage/llms.txt

Allows insertion of custom HTML content, such as advertisements, images, or paywalls, into the Uni-Reader. This is achieved by providing an array of HTML strings to the 'custom' property during initialization.

```javascript
export default {
  data() {
    return {
      custom: [
        `<div style="width: 100%;height: 100%;text-align: center;">
          <p style="margin-top: 50px">Advertisement or Custom Content</p>
          <img src="illustration.jpg" style="height: 400px;">
          <button onclick="clickme(123, 456)">Interactive Button</button>
        </div>`,
        `<div style="width: 100%;height: 100px;text-align: center;">
          <p>This chapter requires payment</p>
        </div>`
      ]
    }
  },
  onReady() {
    const { page } = this.$refs;
    let contents = [
      {
        chapter: 3,
        content: this.getContent(3),
        title: 'Chapter 3',
        isStart: false,
        isEnd: false
      },
      {
        chapter: 4,
        custom: this.custom, // Insert custom pages instead of text
        title: 'Special Content',
        isStart: false,
        isEnd: false
      }
    ];

    page.init({
      contents: contents,
      start: 0,
      currentChapter: 3
    });
  },
  methods: {
    // Handle clicks from custom page content
    clickme(param1, param2) {
      uni.showToast({
        icon: 'none',
        title: 'Button clicked with params: ' + param1 + ', ' + param2
      });
    }
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.