tmui-cli 2.0.0 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//347/262/230/346/200/247/345/270/203/345/261/200 Sticky.md"

@@ -0,0 +1,116 @@
+# 粘性布局 Sticky
+
+## 介绍
+
+可以同时存在多个悬停，多个悬停时，还支持触发距离悬停的设置，
+在复杂页面需要多个菜单吸附时非常有用。并且配合切换change事件做到更复杂的布局。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-sticky/x-sticky.uvue
+```
+
+## 使用
+
+```ts
+<x-sticky></x-sticky>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| top | `顶部的偏移量，可传数字（默认 rpx）或带单位字符串`<br> | `union` | `"0"` |
+| left | `左边的偏移量，可传数字（默认 rpx）或带单位字符串`<br> | `union` | `"0"` |
+| diffTop | `触发距离，默认0，意思是组件距离顶部多远时触发悬停。`<br>`对于需要多个悬停时此属性非常有用。`<br>`这个值不允许使用%单位，可以是：px,rpx,数字（默认是rpx）`<br> | `union` | `'0'` |
+| zIndex | `层级`<br> | `number` | `88` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `<br>isFixed: boolean<br>` | 当触发悬停切换时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽，你要悬停的布局放在这里。` | status: boolean<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/sticky
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">粘性布局 Sticky</x-text>
+		<x-text color="#999999">当滚动到元素时自动吸附在顶部</x-text>
+		<x-text color="#999999">您应该避免被嵌套的内容不能含有fixed,absolute布局的元素，会影响对齐和裁剪。</x-text>
+	</x-sheet>
+	<x-sticky>
+		<template v-slot="status">
+			<x-sheet color="primary" height="40px" :padding="['12','0']" :margin="['16','0']"
+				class="flex flex-row flex-row-center-start">
+				<text class="text-white">滚动页面我会被自动吸顶</text>
+			</x-sheet>
+		</template>
+	</x-sticky>
+	<x-sheet v-for="item in 3" :key="item" height="100px"></x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">存在多个吸附时</x-text>
+		<x-text color="#999999">可以利用diff-top设置差值，来吸附到上一个 吸附元素的后面，避免钻到上个元素的下方。</x-text>
+	</x-sheet>
+	<x-sticky top="40px" diff-top="40px">
+
+		<template v-slot="status">
+			<x-sheet color="success" :padding="['12','12']" :margin="['16','0']">
+				<text class="text-white">我会被吸附在上面元素的后面，这对布局非常有用</text>
+			</x-sheet>
+		</template>
+	</x-sticky>
+	<x-sheet v-for="item in 10" :key="item" height="100px"></x-sheet>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//347/264/242/345/274/225 xIndexbar.md"

@@ -0,0 +1,113 @@
+# 索引 xIndexbar
+
+## 介绍
+
+特别提醒：本组件在1.0.9重构不向下兼容，并且删除了子组件：x-indexbar-item，不再需要子组件。请使用对应的动态插槽来渲染数据。
+内部为 scroll-view 套 list-view 的嵌套滚动：顶部 top 插槽随外层上推，下方按 A/B/C 分组，分类标题在列表中，滑到当前组才吸顶（类似 iOS 通讯录 / 微信联系人）。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-indexbar/x-indexbar.uvue
+```
+
+## 使用
+
+```ts
+<x-indexbar></x-indexbar>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | `宽`<br> | `string` | `"auto"` |
+| height | `高，%,rpx,px单位均可。`<br> | `string` | `"100%"` |
+| dotActiveColor | `侧边指示激活时的文字颜色`<br>`空值是取全局主题值`<br> | `string` | `""` |
+| dotColor | `侧边指示未激活时的文字颜色`<br> | `string` | `"#c0c0c0"` |
+| dotBgColor | `侧边指示的背景颜色`<br> | `string` | `"white"` |
+| list | ``<br> | `UTSJSONObject[]` | `() : UTSJSONObject[] => [] as UTSJSONObject[]` |
+| cellHeight | `项目的高`<br>`只能是数字，或者带rpx,px单位`<br> | `string` | `'50'` |
+| titleHeight | `项目的标题高`<br>`只能是数字，或者带rpx,px单位`<br> | `string` | `'32'` |
+| customSliderBar | ``<br> | `Array<string>` | `() : string[] => [] as string[]` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| top | `顶部布局，可以自由布局。滚动时会先被外层 scroll-view 上推。` | - |
+| header | `悬浮的菜单头` | title: string<br>title: number<br>index: string<br>index: number<br> |
+| default | `动态插槽` | index: UTSJSONObject<br>index: number<br>index: number<br>currentIndex: UTSJSONObject<br>currentIndex: number<br>currentIndex: number<br>current: UTSJSONObject<br>current: number<br>current: number<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/indexbar
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+		
+	<!-- #endif -->
+
+	
+	<view class="mx-16 flex-1">
+		<x-indexbar :customSliderBar="['搜','火']" :list="list" height="100%" cellHeight="72">
+			<template v-slot:top>
+				<x-search color="transparent" input-bg-color="#ffffff"></x-search>
+			</template>
+			<template v-slot:default="{index,currentIndex,current}">
+				<view class="flex flex-row flex-row-center-start" style="border-bottom: 1px solid rgba(100, 100, 100, 0.1);height:72px;">
+					<image class="flex-shrink" :src="`https://picsum.photos/100/100?random=${index}`" style="width:50px;height:50px;border-radius: 50px;"></image>
+					<text :style="{color:isDark?'#ffffff':'#000000'}" class="ml-20">{{(current as UTSJSONObject).getAny("name")}}</text>
+				</view>
+			</template>
+		</x-indexbar>
+	</view>
+		
+</template>
+
+<script setup>
+	// 示例参数数据,请vip用户到demo中下载查询数据样例.
+	import {dataslist} from "./indexdata.uts"
+	import { xConfig } from "@/uni_modules/tmx-ui";
+	const isDark = computed(():boolean => xConfig.dark=='dark')
+	const list = ref<UTSJSONObject[]>(JSON.parseArray(dataslist)! as UTSJSONObject[])
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//350/277/224/345/233/236/351/241/266/351/203/250 xBacktop.md"

@@ -0,0 +1,125 @@
+# 返回顶部 xBacktop
+
+## 介绍
+
+在uvue页面中，根节点一定是scroll-view并且设置为flex:1才可滚动到顶部。
+如果你想局部放到scroll-view组件中，你需要scroll事件中的top传递到属性scrollTop上并启用局部滚动置顶
+如果你想改变或者自定位置，你可以直接在组件上写style来覆盖定位。详见：https://doc.dcloud.net.cn/uni-app-x/api/page-scroll-to.html
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-backtop/x-backtop.uvue
+```
+
+## 使用
+
+```ts
+<x-backtop></x-backtop>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| round | `圆角,空值时取全局的drawr圆角。`<br> | `union` | `"60px"` |
+| offset | `向下滚动页面时，如果超过此值显示返回顶部按钮。`<br> | `number` | `100` |
+| bgColor | `背景,支持渐变值如:linear-gradient(to left, #FFED46, #FF7EC7)`<br>`默认空值，取全局主题值。`<br> | `string` | `""` |
+| width | `宽度`<br> | `union` | `"60px"` |
+| height | `高度`<br> | `union` | `"60px"` |
+| color | `图标颜色。`<br> | `string` | `"white"` |
+| icon | `图标`<br> | `string` | `"skip-up-fill"` |
+| iconSize | `图标大小`<br> | `union` | `"32"` |
+| scrollTop | `如果你想让本组件放置到局部的scroll中时，你外部scrollview通过scroll事件取得距离顶部的位置传递到此。`<br> | `number` | `0` |
+| disabledPageScroll | `禁用页面级根节点滚动后，可以通过scrollTop来实现局部置顶功能。`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 点击时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认图标插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/backtop
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">返回顶部 xBacktop</x-text>
+		<x-text color="#999999">请往下滚动100px，触发显示返回顶部按钮，请注意观察右下角。</x-text>
+		<x-text color="#999999">添加自定style可以覆盖位置，将元素定位到左边。</x-text>
+
+	</x-sheet>
+
+	<x-sheet>
+		<view class="relative" style="height:300px;">
+			<list-view :scroll-top="scrollTop" @scroll="onScroll" style="height:100%;">
+				<list-item>
+					<x-text color="#999999">局部滚动我</x-text>
+					<view style="height:1200px"></view>
+				</list-item>
+			</list-view>
+			<x-backtop @click="scrollSetop" :scroll-top="scrollTop" :offset="50" :disabledPageScroll="true"></x-backtop>
+		</view>
+	</x-sheet>
+	<!--  style="right: auto;left: 30px;" 添加自定style可以覆盖位置，将元素定位到左边。 -->
+	<x-backtop></x-backtop>
+	<x-backtop style="right: auto;left: 16px;"></x-backtop>
+
+	<view style="height: 1600px;"></view>
+
+</template>
+
+<script setup lang="ts">
+	const scrollTop = ref(0)
+	const onScroll = (evt : UniScrollEvent) => {
+		scrollTop.value = evt.detail.scrollTop
+	}
+	const scrollSetop = () => {
+		scrollTop.value = 0
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)