uni-halo/.agents/skills/uni-app/references/core-view-components.md

name, description

name	description
View Components	Core container components for layout and structure

View Components

view

Basic container component, similar to HTML <div>.

<template>
  <view class="container">
    <view class="flex-row">
      <view class="item">A</view>
      <view class="item">B</view>
    </view>
    <view class="flex-column">
      <view class="item">C</view>
      <view class="item">D</view>
    </view>
  </view>
</template>

Properties:

Property	Type	Default	Description
hover-class	String	none	CSS class when pressed
hover-stop-propagation	Boolean	false	Stop propagation to ancestor nodes
hover-start-time	Number	50	Delay before hover state (ms)
hover-stay-time	Number	400	Duration to keep hover state (ms)

Tips:

• <div> is auto-converted to <view> in mini-programs
• Use <text> to wrap text in nvue pages

scroll-view

Scrollable container with enhanced scroll capabilities.

<template>
  <!-- Vertical scroll -->
  <scroll-view
    scroll-y
    class="scroll-container"
    @scroll="onScroll"
    @scrolltolower="loadMore"
    :scroll-top="scrollTop"
    :scroll-into-view="targetId"
  >
    <view id="item1">Item 1</view>
    <view id="item2">Item 2</view>
  </scroll-view>

  <!-- Horizontal scroll -->
  <scroll-view scroll-x class="horizontal-scroll">
    <view class="scroll-item">1</view>
    <view class="scroll-item">2</view>
  </scroll-view>
</template>

Properties:

Property	Type	Description
scroll-x	Boolean	Enable horizontal scroll
scroll-y	Boolean	Enable vertical scroll
upper-threshold	Number	Distance from top to trigger scrolltoupper (px)
lower-threshold	Number	Distance from bottom to trigger scrolltolower (px)
scroll-top	Number	Vertical scroll position
scroll-left	Number	Horizontal scroll position
scroll-into-view	String	Element ID to scroll into view
scroll-with-animation	Boolean	Enable smooth scroll animation
enable-back-to-top	Boolean	iOS: tap status bar to scroll top

Events:

• @scroll - Scroll event
• @scrolltoupper - Reached top
• @scrolltolower - Reached bottom

swiper

Carousel/slider container for switching content.

<template>
  <swiper
    :current="currentIndex"
    :autoplay="true"
    :interval="3000"
    :duration="500"
    :circular="true"
    :indicator-dots="true"
    @change="onSwiperChange"
  >
    <swiper-item>
      <view class="slide">Slide 1</view>
    </swiper-item>
    <swiper-item>
      <view class="slide">Slide 2</view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current
    }
  }
}
</script>

swiper Properties:

Property	Type	Default	Description
indicator-dots	Boolean	false	Show pagination dots
indicator-color	Color	rgba(0,0,0,.3)	Inactive dot color
indicator-active-color	Color	#000000	Active dot color
autoplay	Boolean	false	Auto-play slides
current	Number	0	Current slide index
interval	Number	5000	Auto-play interval (ms)
duration	Number	500	Transition duration (ms)
circular	Boolean	false	Circular sliding
vertical	Boolean	false	Vertical sliding
previous-margin	String	0px	Previous slide margin
next-margin	String	0px	Next slide margin

movable-area / movable-view

Draggable and scalable container.

<template>
  <movable-area class="move-area">
    <movable-view
      :x="x"
      :y="y"
      direction="all"
      :scale="true"
      :scale-min="0.5"
      :scale-max="4"
      @change="onChange"
      @scale="onScale"
    >
      Draggable content
    </movable-view>
  </movable-area>
</template>

movable-view Properties:

Property	Type	Default	Description
direction	String	none	Move direction: all/vertical/horizontal/none
x	Number		Initial X position
y	Number		Initial Y position
scale	Boolean	false	Enable scaling
scale-min	Number	0.5	Min scale
scale-max	Number	10	Max scale
scale-value	Number	1	Initial scale

cover-view / cover-image

Native overlay components that can cover native components (map, video, canvas).

<template>
  <map class="map">
    <cover-view class="overlay">Overlay text</cover-view>
    <cover-image class="marker" src="/static/marker.png" />
  </map>
</template>

Limitations:

• Only supported in WeChat MP, App, and H5
• Limited styling capabilities
• Cannot nest regular components inside