123

xs-app/components/read/chapterCatalog.vue

@@ -1,53 +1,55 @@
 <template>
-	<view
-		class="directory"
-		:class="{ container0: background === 1, container1: background === 2 }"
-		@touchend.stop>
-		<view class="virtual-list" style="position: relative;">
-			<movable-area style="position: absolute;right: 0;width: 30px;height: 100%;">
-				<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false">
-					<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
-					<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
-				</movable-view>
-			</movable-area>
-			<scroll-view
-				scroll-y="true"
-				:style="{
-					height: scrollHeight + 'px',
-					position: 'relative',
-					zIndex: 1
-				}"
-				@scroll="handleScroll"
-				:scroll-top="scrollTop"
-				:show-scrollbar="false"
-			>
-				<view
-					class="scroll-bar"
+	<uni-popup @maskClick="emits('Close')" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="catalog"  background-color="#fff"  @change="onChange">
+		<view
+			:class="{ container0: background === 1, container1: background === 2 }"
+			@touchend.stop>
+			<view>
+			<!-- 	<movable-area>
+					<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false">
+						<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
+						<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
+					</movable-view>
+				</movable-area> -->
+				<scroll-view
+					scroll-y="true"
 					:style="{
-						height: localHeight + 'px'
-					}"
-				></view>
-				<view
-					class="list"
-					:style="{
-						transform: `translateY(${offset}px)`
+						height: scrollHeight + 'px',
+						position: 'relative',
+						zIndex: 1
 					}"
+					@scroll="handleScroll"
+					:scroll-top="scrollTop"
+					:show-scrollbar="false"
 				>
-				<view class="item-wrap" v-for="(item, index) in visibleData" :key="item.id">
-					<!-- <slot :item="item" :active="active"></slot> -->
-					<view class="directory-listItem" :class="{ active: item.id == active }" @click="clickChar(item)">{{ item.name }}</view>
-				</view>
-				</view>
-			</scroll-view>
+				<!-- 	<view
+						class="scroll-bar"
+						:style="{
+							height: localHeight + 'px'
+						}"
+					></view> -->
+					<view
+						class="list"
+						:style="{
+							transform: `translateY(${offset}px)`
+						}"
+					>
+					<view class="item-wrap" v-for="(item, index) in visibleData" :key="item.id">
+						<!-- <slot :item="item" :active="active"></slot> -->
+						<view class="directory-listItem" @click="clickChar(item)">{{ item.name }}</view>
+					</view>
+					</view>
+				</scroll-view>
+			</view>
 		</view>
-	</view>
+	</uni-popup>
+	
 	
 </template>
 
 <script setup lang="ts">
 	import { ref,onMounted,computed} from 'vue';
 	// const {items,remain,size,active,scrollHeight} = defineProps(['items','remain','size','active','scrollHeight'])
-	const {items,remain,size,active,scrollHeight} =defineProps({
+	const {items,remain,size,scrollHeight} =defineProps({
 		  items: {
 		    type: Array,
 		    required: true,
@@ -63,18 +65,18 @@
 		    required: true,
 		    default: 0
 		  },
-		  active: {
-		    type: Number,
-		    required: true,
-		    default: 0
-		  },
+		  // active: {
+		  //   type: Number,
+		  //   required: true,
+		  //   default: 0
+		  // },
 		  scrollHeight: {
 		    type: Number,
 		    required: true,
 		    default: 0
 		  },
 		});
-	const emits = defineEmits(['clickChar'])
+	const emits = defineEmits(['clickChar','Close'])
 	let start = ref(0)
 	let end = ref(0)
 	let offset = ref(0)
@@ -82,8 +84,12 @@
 	let y = ref(0)
 	
 	let background = ref(1)
+	
+	const catalog = ref(null)
 	onMounted(()=>{
-		scrollTop.value = size * active
+		const type = 'bottom'
+		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
+		catalog.value.open(type)
 	})
 	
 	let preCount = computed(()=>{
@@ -131,6 +137,13 @@
 		offset.value = t_offset < 0 ? 0 : t_offset;
 	}
 	
+	//
+	function onChange(e){
+				console.log("show",e)
+		if(e.show==false){
+			emits('Close')
+		}
+	}
 </script>
 
 <style scoped>
@@ -174,16 +187,23 @@
 	.container1 {
 		background-color: #000;
 	}
-	.directory {
-		position: absolute;
-		top: 0;
+/* 	.directory {
+		position: fixed;
 		display: flex;
 		flex-flow: column;
-		width: 600rpx;
-		height: 100%;
-		transition: left 0.1s;
-	}
+		width: 100%;
+		height: 30%;
+	} */
 	.active {
 		color: red;
 	}
+	.scroll-view {
+	  scrollbar-width: none; /* 对于微信小程序等平台，可以使用scrollbar-width设置为none */
+	}
+	.scroll-view {
+	  over-scroll: false;
+	}
+	.scroll-view::-webkit-scrollbar {
+	  display: none; /* 隐藏滚动条 */
+	}
 </style>

xs-app/pages.json

@@ -30,7 +30,8 @@
 		{
 			"path": "pages/readbook/read",
 			"style": {
-				"navigationStyle": "default",
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "",
 				"enablePullDownRefresh": true,
 				"onReachBottomDistance": 10
 			}
@@ -80,5 +81,6 @@
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {}
+	
 }

xs-app/pages/readbook/read.vue

@@ -9,7 +9,7 @@
 	@Close="closeMenu">
 	</settingMenu>
 	<chapterCatalog v-if="showChapterList" :items="directoryList" :size="40" :remain="16"
-	 :active="tools.getCurChapterData(cur_read_chapter_index,directoryList).id" :scrollHeight="windowHeight - 60" @clickChar="goToChapter">
+	 :scrollHeight="windowHeight*0.6" @clickChar="goToChapter" @Close="showChapterList=false">
 	</chapterCatalog>
 </template>
 
@@ -41,7 +41,6 @@
 	if(book_data!=null&&start_read_chapter_id!=-1){
 		initView()
 	}
-	
 	let book_text_list_view = ref<Array<book_read_data>>([])
 	let book_text_list_cache = ref<Map<number,book_read_data>>(new Map<number,book_read_data>())
 	function initView(){
@@ -182,6 +181,7 @@
 	function hideSetting(){
 		startTouchY.value = -1
 		menuShow.value = false
+		hideChapterList()
 	}
 	
 	function closeMenu(){
@@ -198,6 +198,10 @@
 		draw()
 		hideChapterList()
 	}
+	
+	// function getCurChapterId(){
+	// 	return tools.getCurChapterData(cur_read_chapter_index.value,directoryList).id
+	// }
 </script>
 
 <style scoped>

xs-app/unpackage/dist/dev/mp-toutiao/app.js

@@ -8,6 +8,7 @@ if (!Math) {
   "./pages/mine/mine.js";
   "./pages/readbook/read.js";
   "./pages/test/index.js";
+  "./pages/search/search.js";
 }
 const _sfc_main = {
   onLaunch: function() {

xs-app/unpackage/dist/dev/mp-toutiao/app.json

@@ -4,7 +4,8 @@
     "pages/bookshelf/bookshelf",
     "pages/mine/mine",
     "pages/readbook/read",
-    "pages/test/index"
+    "pages/test/index",
+    "pages/search/search"
   ],
   "window": {
     "navigationBarTextStyle": "black",

xs-app/unpackage/dist/dev/mp-toutiao/common/vendor.js

@@ -8872,6 +8872,7 @@ const Pinia = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
 const createHook = (lifecycle) => (hook, target = getCurrentInstance()) => {
   !isInSSRComponentSetup && injectHook(lifecycle, hook, target);
 };
+const onLoad = /* @__PURE__ */ createHook(ON_LOAD);
 const onReachBottom = /* @__PURE__ */ createHook(ON_REACH_BOTTOM);
 const onPullDownRefresh = /* @__PURE__ */ createHook(ON_PULL_DOWN_REFRESH);
 exports.Pinia = Pinia;
@@ -8888,6 +8889,7 @@ exports.initVueI18n = initVueI18n;
 exports.isRef = isRef;
 exports.n = n;
 exports.o = o;
+exports.onLoad = onLoad;
 exports.onMounted = onMounted;
 exports.onPullDownRefresh = onPullDownRefresh;
 exports.onReachBottom = onReachBottom;

xs-app/unpackage/dist/dev/mp-toutiao/components/custom-navbar/custom-navbar.js

@@ -0,0 +1,208 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const customStatusBar = () => "./custom-statusbar.js";
+const getVal = (val) => typeof val === "number" ? val + "px" : val;
+const _sfc_main = {
+  name: "CustomNavBar",
+  components: {
+    customStatusBar
+  },
+  emits: ["clickLeft", "clickRight", "clickTitle"],
+  props: {
+    dark: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    leftText: {
+      type: String,
+      default: ""
+    },
+    rightText: {
+      type: String,
+      default: ""
+    },
+    leftIcon: {
+      type: String,
+      default: ""
+    },
+    rightIcon: {
+      type: String,
+      default: ""
+    },
+    fixed: {
+      type: [Boolean, String],
+      default: false
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    backgroundColor: {
+      type: String,
+      default: ""
+    },
+    statusBar: {
+      type: [Boolean, String],
+      default: false
+    },
+    shadow: {
+      type: [Boolean, String],
+      default: false
+    },
+    border: {
+      type: [Boolean, String],
+      default: true
+    },
+    height: {
+      type: [Number, String],
+      default: 44
+    },
+    leftWidth: {
+      type: [Number, String],
+      default: 60
+    },
+    rightWidth: {
+      type: [Number, String],
+      default: 60
+    },
+    titleFontSize: {
+      type: [Number, String],
+      default: 17
+    },
+    leftTitleFontSize: {
+      type: [Number, String],
+      default: 12
+    },
+    customClickLeft: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+  computed: {
+    themeBgColor() {
+      if (this.dark) {
+        if (this.backgroundColor) {
+          return this.backgroundColor;
+        } else {
+          return this.dark ? "#333" : "#FFF";
+        }
+      }
+      return this.backgroundColor || "#FFF";
+    },
+    themeColor() {
+      if (this.dark) {
+        if (this.color) {
+          return this.color;
+        } else {
+          return this.dark ? "#fff" : "#333";
+        }
+      }
+      return this.color || "#333";
+    },
+    navbarHeight() {
+      return getVal(this.height);
+    },
+    leftIconWidth() {
+      return getVal(this.leftWidth);
+    },
+    rightIconWidth() {
+      return getVal(this.rightWidth);
+    },
+    isCustomClickLeft() {
+      return getVal(this.customClickLeft);
+    }
+  },
+  mounted() {
+    if (common_vendor.index.report && this.title !== "") {
+      common_vendor.index.report("title", this.title);
+    }
+  },
+  methods: {
+    onClickLeft() {
+      if (this.isCustomClickLeft == false) {
+        common_vendor.index.navigateBack();
+      }
+      this.$emit("clickLeft");
+    },
+    onClickRight() {
+      this.$emit("clickRight");
+    },
+    onClickTitle() {
+      this.$emit("clickTitle");
+    }
+  }
+};
+if (!Array) {
+  const _component_customStatusBar = common_vendor.resolveComponent("customStatusBar");
+  const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
+  (_component_customStatusBar + _easycom_uni_icons2)();
+}
+const _easycom_uni_icons = () => "../../uni_modules/uni-icons/components/uni-icons/uni-icons.js";
+if (!Math) {
+  _easycom_uni_icons();
+}
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return common_vendor.e({
+    a: $props.statusBar
+  }, $props.statusBar ? {} : {}, {
+    b: $props.leftIcon.length > 0
+  }, $props.leftIcon.length > 0 ? {
+    c: common_vendor.p({
+      color: $options.themeColor,
+      type: $props.leftIcon,
+      size: "20"
+    })
+  } : {}, {
+    d: $props.leftText.length
+  }, $props.leftText.length ? {
+    e: common_vendor.t($props.leftText),
+    f: $options.themeColor,
+    g: $props.leftTitleFontSize + "px",
+    h: !$props.leftIcon.length > 0 ? 1 : ""
+  } : {}, {
+    i: common_vendor.o((...args) => $options.onClickLeft && $options.onClickLeft(...args)),
+    j: $options.leftIconWidth,
+    k: $props.title.length > 0
+  }, $props.title.length > 0 ? {
+    l: common_vendor.t($props.title),
+    m: $options.themeColor,
+    n: $props.titleFontSize + "px"
+  } : {}, {
+    o: common_vendor.o((...args) => $options.onClickTitle && $options.onClickTitle(...args)),
+    p: $props.rightIcon.length
+  }, $props.rightIcon.length ? {
+    q: common_vendor.p({
+      color: $options.themeColor,
+      type: $props.rightIcon,
+      size: "22"
+    })
+  } : {}, {
+    r: $props.rightText.length && !$props.rightIcon.length
+  }, $props.rightText.length && !$props.rightIcon.length ? {
+    s: common_vendor.t($props.rightText),
+    t: $options.themeColor
+  } : {}, {
+    v: common_vendor.o((...args) => $options.onClickRight && $options.onClickRight(...args)),
+    w: $options.rightIconWidth,
+    x: $options.themeColor,
+    y: $options.themeBgColor,
+    z: $options.navbarHeight,
+    A: $props.fixed ? 1 : "",
+    B: $props.shadow ? 1 : "",
+    C: $props.border ? 1 : "",
+    D: $options.themeBgColor,
+    E: $props.fixed
+  }, $props.fixed ? common_vendor.e({
+    F: $props.statusBar
+  }, $props.statusBar ? {} : {}, {
+    G: $options.navbarHeight
+  }) : {}, {
+    H: $props.dark ? 1 : ""
+  });
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-94e9cc56"], ["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/components/custom-navbar/custom-navbar.vue"]]);
+tt.createComponent(Component);

xs-app/unpackage/dist/dev/mp-toutiao/components/custom-navbar/custom-navbar.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "custom-status-bar": "./custom-statusbar",
+    "uni-icons": "../../uni_modules/uni-icons/components/uni-icons/uni-icons"
+  }
+}

xs-app/unpackage/dist/dev/mp-toutiao/components/custom-navbar/custom-navbar.ttss

@@ -0,0 +1,107 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.uni-nav-bar-text.data-v-94e9cc56 {
+  font-size: 14px;
+}
+.uni-nav-bar-right-text.data-v-94e9cc56 {
+  font-size: 12px;
+}
+.uni-navbar__content.data-v-94e9cc56 {
+  position: relative;
+  background-color: transparent;
+}
+.uni-navbar-btn-text.data-v-94e9cc56 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  line-height: 12px;
+}
+.uni-navbar__header.data-v-94e9cc56 {
+  display: flex;
+  padding: 0 10px;
+  flex-direction: row;
+  height: 44px;
+  font-size: 12px;
+}
+.uni-navbar__header-btns.data-v-94e9cc56 {
+  overflow: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  width: 120rpx;
+  justify-content: center;
+  align-items: center;
+}
+.uni-navbar__header-btns-left.data-v-94e9cc56 {
+  display: flex;
+  width: 120rpx;
+  justify-content: flex-start;
+  align-items: center;
+}
+.uni-navbar__header-btns-right.data-v-94e9cc56 {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+.uni-navbar__header-container.data-v-94e9cc56 {
+  display: flex;
+  flex: 1;
+  padding: 0 10px;
+  overflow: hidden;
+}
+.uni-navbar__header-container-inner.data-v-94e9cc56 {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  overflow: hidden;
+}
+.uni-navbar__placeholder-view.data-v-94e9cc56 {
+  height: 44px;
+}
+.uni-navbar--fixed.data-v-94e9cc56 {
+  position: fixed;
+  z-index: 998;
+  left: 0;
+  right: 0;
+}
+.uni-navbar--shadow.data-v-94e9cc56 {
+  box-shadow: 0 1px 6px #ccc;
+}
+.uni-navbar--border.data-v-94e9cc56 {
+  border-bottom-width: 1rpx;
+  border-bottom-style: solid;
+  border-bottom-color: #eee;
+}
+.uni-ellipsis-1.data-v-94e9cc56 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

xs-app/unpackage/dist/dev/mp-toutiao/components/custom-navbar/custom-statusbar.js

@@ -0,0 +1,20 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const _sfc_main = {
+  name: "CustomStatusBar",
+  data() {
+    return {
+      statusBarHeight: 20
+    };
+  },
+  mounted() {
+    this.statusBarHeight = common_vendor.index.getSystemInfoSync().statusBarHeight;
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: $data.statusBarHeight + "px"
+  };
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/components/custom-navbar/custom-statusbar.vue"]]);
+tt.createComponent(Component);

xs-app/unpackage/dist/dev/mp-toutiao/components/custom-navbar/custom-statusbar.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

xs-app/unpackage/dist/dev/mp-toutiao/components/custom-navbar/custom-statusbar.ttml

@@ -0,0 +1 @@
+<view style="{{'height:' + a}}" class="status-bar"><slot/></view>

xs-app/unpackage/dist/dev/mp-toutiao/components/custom-navbar/custom-statusbar.ttss

@@ -0,0 +1,28 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.status-bar {
+  height: 20px;
+}

xs-app/unpackage/dist/dev/mp-toutiao/components/read/chapterCatalog.js

@@ -1,5 +1,13 @@
 "use strict";
 const common_vendor = require("../../common/vendor.js");
+if (!Array) {
+  const _easycom_uni_popup2 = common_vendor.resolveComponent("uni-popup");
+  _easycom_uni_popup2();
+}
+const _easycom_uni_popup = () => "../../uni_modules/uni-popup/components/uni-popup/uni-popup.js";
+if (!Math) {
+  _easycom_uni_popup();
+}
 const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
   __name: "chapterCatalog",
   props: {
@@ -18,20 +26,20 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
       required: true,
       default: 0
     },
-    active: {
-      type: Number,
-      required: true,
-      default: 0
-    },
+    // active: {
+    //   type: Number,
+    //   required: true,
+    //   default: 0
+    // },
     scrollHeight: {
       type: Number,
       required: true,
       default: 0
     }
   },
-  emits: ["clickChar"],
+  emits: ["clickChar", "Close"],
   setup(__props, { emit: __emit }) {
-    const { items, remain, size, active, scrollHeight } = __props;
+    const { items, remain, size, scrollHeight } = __props;
     const emits = __emit;
     let start = common_vendor.ref(0);
     let end = common_vendor.ref(0);
@@ -39,8 +47,10 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
     let scrollTop = common_vendor.ref(0);
     let y = common_vendor.ref(0);
     let background = common_vendor.ref(1);
+    const catalog = common_vendor.ref(null);
     common_vendor.onMounted(() => {
-      scrollTop.value = size * active;
+      const type = "bottom";
+      catalog.value.open(type);
     });
     let preCount = common_vendor.computed(() => {
       return Math.min(start.value, remain);
@@ -59,15 +69,6 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
     function clickChar(item) {
       emits("clickChar", item);
     }
-    function change(e) {
-      if (e.detail.source !== "touch") {
-        return;
-      }
-      let y2 = e.detail.y;
-      let scroll = y2 / (scrollHeight - 40) * (localHeight.value - scrollHeight);
-      scroll = scroll < 0 ? 0 : scroll;
-      scrollTop.value = scroll;
-    }
     function handleScroll(ev) {
       const scrollTop2 = ev.detail.scrollTop;
       y.value = scrollTop2 / (localHeight.value - scrollHeight) * (scrollHeight - 40);
@@ -77,26 +78,38 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
       const t_offset = scrollTop2 - scrollTop2 % size - preCount.value * size;
       offset.value = t_offset < 0 ? 0 : t_offset;
     }
+    function onChange(e) {
+      console.log("show", e);
+      if (e.show == false) {
+        emits("Close");
+      }
+    }
     return (_ctx, _cache) => {
       return {
-        a: common_vendor.o(change),
-        b: common_vendor.unref(y),
-        c: common_vendor.unref(localHeight) + "px",
-        d: common_vendor.f(common_vendor.unref(visibleData), (item, index, i0) => {
+        a: common_vendor.f(common_vendor.unref(visibleData), (item, index, i0) => {
           return {
             a: common_vendor.t(item.name),
-            b: item.id == __props.active ? 1 : "",
-            c: common_vendor.o(($event) => clickChar(item)),
-            d: item.id
+            b: common_vendor.o(($event) => clickChar(item)),
+            c: item.id
           };
         }),
-        e: `translateY(${common_vendor.unref(offset)}px)`,
-        f: __props.scrollHeight + "px",
-        g: common_vendor.o(handleScroll),
-        h: common_vendor.unref(scrollTop),
-        i: common_vendor.unref(background) === 1 ? 1 : "",
-        j: common_vendor.unref(background) === 2 ? 1 : "",
-        k: common_vendor.o(() => {
+        b: `translateY(${common_vendor.unref(offset)}px)`,
+        c: __props.scrollHeight + "px",
+        d: common_vendor.o(handleScroll),
+        e: common_vendor.unref(scrollTop),
+        f: common_vendor.unref(background) === 1 ? 1 : "",
+        g: common_vendor.unref(background) === 2 ? 1 : "",
+        h: common_vendor.o(() => {
+        }),
+        i: common_vendor.sr(catalog, "452ce1e2-0", {
+          "k": "catalog"
+        }),
+        j: common_vendor.o(($event) => emits("Close")),
+        k: common_vendor.o(onChange),
+        l: common_vendor.p({
+          animation: false,
+          ["mask-background-color"]: "rgba(0,0,0,0)",
+          ["background-color"]: "#fff"
         })
       };
     };

xs-app/unpackage/dist/dev/mp-toutiao/components/read/chapterCatalog.json

@@ -1,4 +1,6 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "uni-popup": "../../uni_modules/uni-popup/components/uni-popup/uni-popup"
+  }
 }

xs-app/unpackage/dist/dev/mp-toutiao/components/read/chapterCatalog.ttml

@@ -1 +1 @@
-<view class="{{('directory') + ' ' + 'data-v-452ce1e2' + ' ' + (i && 'container0') + ' ' + (j && 'container1')}}" catchtouchend="{{k}}"><view class="virtual-list data-v-452ce1e2" style="position:relative"><movable-area class="data-v-452ce1e2" style="position:absolute;right:0;width:30px;height:100%"><movable-view class="action-bar-box data-v-452ce1e2" direction="vertical" bindchange="{{a}}" y="{{b}}" animation="{{false}}"><view class="data-v-452ce1e2" style="border-bottom:#000 solid 2px;width:100%"></view><view class="data-v-452ce1e2" style="border-bottom:#000 solid 2px;width:100%"></view></movable-view></movable-area><scroll-view class="data-v-452ce1e2" scroll-y="true" style="{{'height:' + f + ';' + ('position:' + 'relative') + ';' + ('z-index:' + 1)}}" bindscroll="{{g}}" scroll-top="{{h}}" show-scrollbar="{{false}}"><view class="scroll-bar data-v-452ce1e2" style="{{'height:' + c}}"></view><view class="list data-v-452ce1e2" style="{{'transform:' + e}}"><view tt:for="{{d}}" tt:for-item="item" tt:key="d" class="item-wrap data-v-452ce1e2"><view class="{{('directory-listItem') + ' ' + 'data-v-452ce1e2' + ' ' + (item.b && 'active')}}" bindtap="{{item.c}}">{{item.a}}</view></view></view></scroll-view></view></view>
+<uni-popup tt:if="{{l}}" class="r data-v-452ce1e2" u-s="{{['d']}}" bindmaskClick="{{j}}" u-r="catalog" bindchange="{{k}}" u-i="452ce1e2-0" bind:__l="__l" u-p="{{l}}"><view class="{{('data-v-452ce1e2') + ' ' + (f && 'container0') + ' ' + (g && 'container1')}}" catchtouchend="{{h}}"><view class="data-v-452ce1e2"><scroll-view class="data-v-452ce1e2" scroll-y="true" style="{{'height:' + c + ';' + ('position:' + 'relative') + ';' + ('z-index:' + 1)}}" bindscroll="{{d}}" scroll-top="{{e}}" show-scrollbar="{{false}}"><view class="list data-v-452ce1e2" style="{{'transform:' + b}}"><view tt:for="{{a}}" tt:for-item="item" tt:key="c" class="item-wrap data-v-452ce1e2"><view class="directory-listItem data-v-452ce1e2" bindtap="{{item.b}}">{{item.a}}</view></view></view></scroll-view></view></view></uni-popup>

xs-app/unpackage/dist/dev/mp-toutiao/components/read/chapterCatalog.ttss

@@ -39,15 +39,22 @@
 .container1.data-v-452ce1e2 {
 		background-color: #000;
 }
-.directory.data-v-452ce1e2 {
-		position: absolute;
-		top: 0;
+/* 	.directory {
+		position: fixed;
 		display: flex;
 		flex-flow: column;
-		width: 600rpx;
-		height: 100%;
-		transition: left 0.1s;
-}
+		width: 100%;
+		height: 30%;
+	} */
 .active.data-v-452ce1e2 {
 		color: red;
 }
+.scroll-view.data-v-452ce1e2 {
+	  scrollbar-width: none; /* 对于微信小程序等平台，可以使用scrollbar-width设置为none */
+}
+.scroll-view.data-v-452ce1e2 {
+	  over-scroll: false;
+}
+.scroll-view.data-v-452ce1e2::-webkit-scrollbar {
+	  display: none; /* 隐藏滚动条 */
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/bookstore.js

@@ -1,25 +1,56 @@
 "use strict";
-const framework_util = require("../../framework/util.js");
 const common_vendor = require("../../common/vendor.js");
-const _sfc_main = {
-  data() {
-    return {};
-  },
-  onLoad() {
-  },
-  methods: {
-    onClickTest() {
+const framework_util = require("../../framework/util.js");
+if (!Math) {
+  (customNav + templateBook3 + templateBookList)();
+}
+const templateBook3 = () => "./template/template-book-3.js";
+const templateBookList = () => "./template/template-book-list.js";
+const customNav = () => "../../components/custom-navbar/custom-navbar.js";
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  __name: "bookstore",
+  setup(__props) {
+    let book_3_data_list = common_vendor.ref([]);
+    var bool = true;
+    common_vendor.onLoad((options) => {
+      console.log("bookstore-options=", options);
+      requestData(bool);
+    });
+    function requestData(is) {
+      if (is) {
+        book_3_data_list.value = ["4", "5", "6"];
+      } else {
+        book_3_data_list.value = ["1", "1", "1"];
+      }
+    }
+    function onClickTest() {
       framework_util.util.showLoading();
       setTimeout(() => {
         framework_util.util.hideLoading();
-      }, 1500);
+        bool = !bool;
+        requestData(bool);
+      }, 200);
+    }
+    function onClickNav() {
+      common_vendor.index.navigateTo({
+        url: "/pages/search/search?id=123"
+      });
     }
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "书城",
+          statusBar: "true",
+          fixed: "true"
+        }),
+        b: common_vendor.o(onClickTest),
+        c: common_vendor.o(onClickNav),
+        d: common_vendor.p({
+          dataList: common_vendor.unref(book_3_data_list)
+        })
+      };
+    };
   }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return {
-    a: common_vendor.o((...args) => $options.onClickTest && $options.onClickTest(...args))
-  };
-}
-const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/pages/bookstore/bookstore.vue"]]);
+});
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/pages/bookstore/bookstore.vue"]]);
 tt.createPage(MiniProgramPage);

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/bookstore.json

@@ -1,4 +1,8 @@
 {
   "navigationStyle": "default",
-  "usingComponents": {}
+  "usingComponents": {
+    "template-book3": "./template/template-book-3",
+    "template-book-list": "./template/template-book-list",
+    "custom-nav": "../../components/custom-navbar/custom-navbar"
+  }
 }

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/bookstore.ttml

@@ -1 +1 @@
-<view> 书城 </view><view style="display:flex;margin-top:30px;height:50px;font-size:30px;background-color:red;justify-content:center;align-items:center" bindtap="{{a}}"> 测试 </view>
+<view class="content"><custom-nav tt:if="{{a}}" u-i="02cb8c04-0" bind:__l="__l" u-p="{{a}}"></custom-nav><view class="item_demo" bindtap="{{b}}"> 测试更换数据 </view><view class="item_demo" bindtap="{{c}}">跳转</view><view class="container"><template-book3 tt:if="{{d}}" u-i="02cb8c04-1" bind:__l="__l" u-p="{{d}}"></template-book3><template-book-list u-i="02cb8c04-2" bind:__l="__l"></template-book-list></view></view>

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/bookstore.ttss

@@ -0,0 +1,43 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.content .container {
+  display: flex;
+  flex-direction: column;
+}
+.item_demo {
+  display: flex;
+  margin-top: 30rpx;
+  height: 100rpx;
+  font-size: 30px;
+  background-color: red;
+  justify-content: center;
+  align-items: center;
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-3.js

@@ -0,0 +1,22 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  __name: "template-book-3",
+  props: {
+    dataList: Array
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.f(__props.dataList, (item, index, i0) => {
+          return {
+            a: common_vendor.t(item),
+            b: index
+          };
+        })
+      };
+    };
+  }
+});
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/pages/bookstore/template/template-book-3.vue"]]);
+tt.createComponent(Component);

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-3.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-3.ttml

@@ -0,0 +1 @@
+<view class="book-3-content"><view tt:for="{{a}}" tt:for-item="item" tt:key="b" class="book-3-content__container"><view class="book_box"><view class="book_box__image"><image class="image" src="/static/logo.png" mode="aspectFill"></image></view><view class="book_box__name">{{item.a}}</view></view></view></view>

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-3.ttss

@@ -0,0 +1,65 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.book-3-content {
+  display: flex;
+  flex-direction: row;
+  background-color: green;
+  margin-top: 20rpx;
+}
+.book-3-content__container {
+  width: 100%;
+}
+.book-3-content__container .book_box {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: deepskyblue;
+}
+.book-3-content__container .book_box__image {
+  display: flex;
+  height: 200rpx;
+  justify-content: center;
+  align-items: center;
+}
+.book-3-content__container .book_box__image .image {
+  width: 75%;
+  height: 100%;
+  border-radius: 6px;
+  background-color: greenyellow;
+}
+.book-3-content__container .book_box__name {
+  display: -webkit-box;
+  align-items: center;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 90%;
+  margin-left: 5%;
+  margin-top: 10rpx;
+  text-align: center;
+  background-color: red;
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-list.js

@@ -0,0 +1,8 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+  return {};
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/pages/bookstore/template/template-book-list.vue"]]);
+tt.createComponent(Component);

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-list.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-list.ttml

@@ -0,0 +1 @@
+<view class="content"> 书-list </view>

xs-app/unpackage/dist/dev/mp-toutiao/pages/bookstore/template/template-book-list.ttss

@@ -0,0 +1,31 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 200rpx;
+  background-color: plum;
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/readbook/read.js

@@ -141,6 +141,7 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
     function hideSetting() {
       startTouchY.value = -1;
       menuShow.value = false;
+      hideChapterList();
     }
     function closeMenu() {
       hideSetting();
@@ -187,12 +188,12 @@ const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
         m: common_vendor.unref(showChapterList)
       }, common_vendor.unref(showChapterList) ? {
         n: common_vendor.o(goToChapter),
-        o: common_vendor.p({
+        o: common_vendor.o(($event) => common_vendor.isRef(showChapterList) ? showChapterList.value = false : showChapterList = false),
+        p: common_vendor.p({
           items: common_vendor.unref(directoryList),
           size: 40,
           remain: 16,
-          active: common_vendor.unref(framework_tools.tools).getCurChapterData(common_vendor.unref(cur_read_chapter_index), common_vendor.unref(directoryList)).id,
-          scrollHeight: common_vendor.unref(windowHeight) - 60
+          scrollHeight: common_vendor.unref(windowHeight) * 0.6
         })
       } : {});
     };

xs-app/unpackage/dist/dev/mp-toutiao/pages/readbook/read.json

@@ -1,5 +1,6 @@
 {
-  "navigationStyle": "default",
+  "navigationStyle": "custom",
+  "navigationBarTitleText": "",
   "enablePullDownRefresh": true,
   "onReachBottomDistance": 10,
   "usingComponents": {

xs-app/unpackage/dist/dev/mp-toutiao/pages/readbook/read.ttml

@@ -1 +1 @@
-<read-page tt:for="{{a}}" tt:for-item="book_read_data_item" tt:key="b" class="r-i-f" u-r="readPages" bindtouchstart="{{b}}" bindtouchend="{{c}}" bindtouchmove="{{d}}" u-i="{{book_read_data_item.c}}" bind:__l="__l" u-p="{{book_read_data_item.d}}"></read-page><setting-menu tt:if="{{e}}" class="r" u-r="Menu" bindclickCatalog="{{g}}" bindclickPreChapter="{{h}}" bindclickNextChapter="{{i}}" bindclickMode="{{j}}" bindclickOpenSetting="{{k}}" bindClose="{{l}}" u-i="b981acfa-1" bind:__l="__l"></setting-menu><chapter-catalog tt:if="{{m}}" bindclickChar="{{n}}" u-i="b981acfa-2" bind:__l="__l" u-p="{{o}}"></chapter-catalog>
+<read-page tt:for="{{a}}" tt:for-item="book_read_data_item" tt:key="b" class="r-i-f" u-r="readPages" bindtouchstart="{{b}}" bindtouchend="{{c}}" bindtouchmove="{{d}}" u-i="{{book_read_data_item.c}}" bind:__l="__l" u-p="{{book_read_data_item.d}}"></read-page><setting-menu tt:if="{{e}}" class="r" u-r="Menu" bindclickCatalog="{{g}}" bindclickPreChapter="{{h}}" bindclickNextChapter="{{i}}" bindclickMode="{{j}}" bindclickOpenSetting="{{k}}" bindClose="{{l}}" u-i="b981acfa-1" bind:__l="__l"></setting-menu><chapter-catalog tt:if="{{m}}" bindclickChar="{{n}}" bindClose="{{o}}" u-i="b981acfa-2" bind:__l="__l" u-p="{{p}}"></chapter-catalog>

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search-nav.js

@@ -0,0 +1,49 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+if (!Array) {
+  const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
+  _easycom_uni_icons2();
+}
+const _easycom_uni_icons = () => "../../uni_modules/uni-icons/components/uni-icons/uni-icons.js";
+if (!Math) {
+  _easycom_uni_icons();
+}
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  __name: "search-nav",
+  emits: ["clickSearch"],
+  setup(__props, { emit: __emit }) {
+    let statusBar_Height = common_vendor.ref(0);
+    let height = common_vendor.ref(0);
+    let search_content = common_vendor.ref("");
+    let emits = __emit;
+    common_vendor.onLoad(() => {
+      statusBar_Height.value = common_vendor.index.getSystemInfoSync().statusBarHeight;
+      height.value = statusBar_Height.value + 50 * 2;
+    });
+    function clickBack() {
+      common_vendor.index.navigateBack();
+    }
+    function onInput() {
+    }
+    function clickSearch() {
+      emits("clickSearch", search_content.value);
+    }
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.unref(statusBar_Height) + "rpx",
+        b: common_vendor.o(clickBack),
+        c: common_vendor.p({
+          type: "back",
+          size: "20"
+        }),
+        d: common_vendor.o([($event) => common_vendor.isRef(search_content) ? search_content.value = $event.detail.value : search_content = $event.detail.value, onInput]),
+        e: common_vendor.o(clickSearch),
+        f: common_vendor.unref(search_content),
+        g: common_vendor.o(clickSearch),
+        h: common_vendor.unref(height) + "rpx"
+      };
+    };
+  }
+});
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/pages/search/search-nav.vue"]]);
+tt.createComponent(Component);

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search-nav.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "uni-icons": "../../uni_modules/uni-icons/components/uni-icons/uni-icons"
+  }
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search-nav.ttml

@@ -0,0 +1 @@
+<view class="nav_content" style="{{'height:' + h}}"><view class="container"><view class="container__status" style="{{'height:' + a}}"></view><view class="container__content"><uni-icons tt:if="{{c}}" bindclick="{{b}}" u-i="24f7f1a2-0" bind:__l="__l" u-p="{{c}}"/><input class="container__content__input" placeholder="输入关键字" placeholder-class="#e9e9e9e" confirm-type="search" bindinput="{{d}}" bindconfirm="{{e}}" type="text" value="{{f}}"/><view class="container__content__btn" bindtap="{{g}}">搜索</view></view></view></view>

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search-nav.ttss

@@ -0,0 +1,60 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  left: 0;
+  top: 0;
+  background-color: #ffffff;
+  border-bottom-width: 1rpx;
+  border-bottom-style: solid;
+  border-bottom-color: #eee;
+}
+.container__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 20rpx;
+  width: 100%;
+  height: 100rpx;
+}
+.container__content__input {
+  margin-left: 2%;
+  padding: 0 2%;
+  width: 70%;
+  height: 70%;
+  border-radius: 5rpx;
+  border: #eee solid 2rpx;
+}
+.container__content__btn {
+  display: flex;
+  width: 15%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search.js

@@ -0,0 +1,30 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+if (!Math) {
+  searchNav();
+}
+const searchNav = () => "./search-nav.js";
+const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
+  __name: "search",
+  setup(__props) {
+    let statusBarHeight = common_vendor.ref(0);
+    let top_height = common_vendor.ref(0);
+    let search_content = common_vendor.ref("");
+    common_vendor.onLoad((options) => {
+      console.log("search-options=", options);
+      statusBarHeight.value = common_vendor.index.getSystemInfoSync().statusBarHeight;
+      top_height.value = statusBarHeight.value + 50;
+    });
+    function searchNavClickSearch(r) {
+      search_content.value = r;
+      console.log("search_content=", search_content.value);
+    }
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.o(searchNavClickSearch)
+      };
+    };
+  }
+});
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/pages/search/search.vue"]]);
+tt.createPage(MiniProgramPage);

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search.json

@@ -0,0 +1,7 @@
+{
+  "navigationStyle": "custom",
+  "enablePullDownRefresh": false,
+  "usingComponents": {
+    "search-nav": "./search-nav"
+  }
+}

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search.ttml

@@ -0,0 +1 @@
+<view class="content"><search-nav bindclickSearch="{{a}}" u-i="f8c22e68-0" bind:__l="__l"/><view class=""> hehehehehe </view></view>

xs-app/unpackage/dist/dev/mp-toutiao/pages/search/search.ttss

@@ -0,0 +1,29 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+/* 颜色变量 */
+/* 行为相关颜色 */
+/* 文字基本颜色 */
+/* 背景颜色 */
+/* 边框颜色 */
+/* 尺寸变量 */
+/* 文字尺寸 */
+/* 图片尺寸 */
+/* Border Radius */
+/* 水平间距 */
+/* 垂直间距 */
+/* 透明度 */
+/* 文章场景相关 */
+.content {
+  display: flex;
+  flex-direction: column;
+}

xs-app/unpackage/dist/dev/mp-toutiao/uni_modules/uni-icons/components/uni-icons/uni-icons.js

@@ -0,0 +1,72 @@
+"use strict";
+const uni_modules_uniIcons_components_uniIcons_uniicons_file_vue = require("./uniicons_file_vue.js");
+const common_vendor = require("../../../../common/vendor.js");
+const getVal = (val) => {
+  const reg = /^[0-9]*$/g;
+  return typeof val === "number" || reg.test(val) ? val + "px" : val;
+};
+const _sfc_main = {
+  name: "UniIcons",
+  emits: ["click"],
+  props: {
+    type: {
+      type: String,
+      default: ""
+    },
+    color: {
+      type: String,
+      default: "#333333"
+    },
+    size: {
+      type: [Number, String],
+      default: 16
+    },
+    customPrefix: {
+      type: String,
+      default: ""
+    },
+    fontFamily: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      icons: uni_modules_uniIcons_components_uniIcons_uniicons_file_vue.fontData
+    };
+  },
+  computed: {
+    unicode() {
+      let code = this.icons.find((v) => v.font_class === this.type);
+      if (code) {
+        return code.unicode;
+      }
+      return "";
+    },
+    iconSize() {
+      return getVal(this.size);
+    },
+    styleObj() {
+      if (this.fontFamily !== "") {
+        return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`;
+      }
+      return `color: ${this.color}; font-size: ${this.iconSize};`;
+    }
+  },
+  methods: {
+    _onClick() {
+      this.$emit("click");
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return {
+    a: common_vendor.s($options.styleObj),
+    b: common_vendor.n("uniui-" + $props.type),
+    c: common_vendor.n($props.customPrefix),
+    d: common_vendor.n($props.customPrefix ? $props.type : ""),
+    e: common_vendor.o((...args) => $options._onClick && $options._onClick(...args))
+  };
+}
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/xy/Desktop/uni_app_project/xs/xs-app/uni_modules/uni-icons/components/uni-icons/uni-icons.vue"]]);
+tt.createComponent(Component);

xs-app/unpackage/dist/dev/mp-toutiao/uni_modules/uni-icons/components/uni-icons/uni-icons.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

xs-app/unpackage/dist/dev/mp-toutiao/uni_modules/uni-icons/components/uni-icons/uni-icons.ttml

@@ -0,0 +1 @@
+<text style="{{a}}" class="{{('uni-icons') + ' ' + b + ' ' + c + ' ' + d}}" bindtap="{{e}}"><slot></slot></text>

xs-app/unpackage/dist/dev/mp-toutiao/uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js

@@ -0,0 +1,648 @@
+"use strict";
+const fontData = [
+  {
+    "font_class": "arrow-down",
+    "unicode": ""
+  },
+  {
+    "font_class": "arrow-left",
+    "unicode": ""
+  },
+  {
+    "font_class": "arrow-right",
+    "unicode": ""
+  },
+  {
+    "font_class": "arrow-up",
+    "unicode": ""
+  },
+  {
+    "font_class": "auth",
+    "unicode": ""
+  },
+  {
+    "font_class": "auth-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "back",
+    "unicode": ""
+  },
+  {
+    "font_class": "bars",
+    "unicode": ""
+  },
+  {
+    "font_class": "calendar",
+    "unicode": ""
+  },
+  {
+    "font_class": "calendar-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "camera",
+    "unicode": ""
+  },
+  {
+    "font_class": "camera-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "cart",
+    "unicode": ""
+  },
+  {
+    "font_class": "cart-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "chat",
+    "unicode": ""
+  },
+  {
+    "font_class": "chat-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "chatboxes",
+    "unicode": ""
+  },
+  {
+    "font_class": "chatboxes-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "chatbubble",
+    "unicode": ""
+  },
+  {
+    "font_class": "chatbubble-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "checkbox",
+    "unicode": ""
+  },
+  {
+    "font_class": "checkbox-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "checkmarkempty",
+    "unicode": ""
+  },
+  {
+    "font_class": "circle",
+    "unicode": ""
+  },
+  {
+    "font_class": "circle-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "clear",
+    "unicode": ""
+  },
+  {
+    "font_class": "close",
+    "unicode": ""
+  },
+  {
+    "font_class": "closeempty",
+    "unicode": ""
+  },
+  {
+    "font_class": "cloud-download",
+    "unicode": ""
+  },
+  {
+    "font_class": "cloud-download-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "cloud-upload",
+    "unicode": ""
+  },
+  {
+    "font_class": "cloud-upload-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "color",
+    "unicode": ""
+  },
+  {
+    "font_class": "color-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "compose",
+    "unicode": ""
+  },
+  {
+    "font_class": "contact",
+    "unicode": ""
+  },
+  {
+    "font_class": "contact-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "down",
+    "unicode": ""
+  },
+  {
+    "font_class": "bottom",
+    "unicode": ""
+  },
+  {
+    "font_class": "download",
+    "unicode": ""
+  },
+  {
+    "font_class": "download-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "email",
+    "unicode": ""
+  },
+  {
+    "font_class": "email-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "eye",
+    "unicode": ""
+  },
+  {
+    "font_class": "eye-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "eye-slash",
+    "unicode": ""
+  },
+  {
+    "font_class": "eye-slash-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "fire",
+    "unicode": ""
+  },
+  {
+    "font_class": "fire-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "flag",
+    "unicode": ""
+  },
+  {
+    "font_class": "flag-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "folder-add",
+    "unicode": ""
+  },
+  {
+    "font_class": "folder-add-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "font",
+    "unicode": ""
+  },
+  {
+    "font_class": "forward",
+    "unicode": ""
+  },
+  {
+    "font_class": "gear",
+    "unicode": ""
+  },
+  {
+    "font_class": "gear-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "gift",
+    "unicode": ""
+  },
+  {
+    "font_class": "gift-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "hand-down",
+    "unicode": ""
+  },
+  {
+    "font_class": "hand-down-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "hand-up",
+    "unicode": ""
+  },
+  {
+    "font_class": "hand-up-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "headphones",
+    "unicode": ""
+  },
+  {
+    "font_class": "heart",
+    "unicode": ""
+  },
+  {
+    "font_class": "heart-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "help",
+    "unicode": ""
+  },
+  {
+    "font_class": "help-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "home",
+    "unicode": ""
+  },
+  {
+    "font_class": "home-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "image",
+    "unicode": ""
+  },
+  {
+    "font_class": "image-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "images",
+    "unicode": ""
+  },
+  {
+    "font_class": "images-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "info",
+    "unicode": ""
+  },
+  {
+    "font_class": "info-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "left",
+    "unicode": ""
+  },
+  {
+    "font_class": "link",
+    "unicode": ""
+  },
+  {
+    "font_class": "list",
+    "unicode": ""
+  },
+  {
+    "font_class": "location",
+    "unicode": ""
+  },
+  {
+    "font_class": "location-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "locked",
+    "unicode": ""
+  },
+  {
+    "font_class": "locked-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "loop",
+    "unicode": ""
+  },
+  {
+    "font_class": "mail-open",
+    "unicode": ""
+  },
+  {
+    "font_class": "mail-open-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "map",
+    "unicode": ""
+  },
+  {
+    "font_class": "map-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "map-pin",
+    "unicode": ""
+  },
+  {
+    "font_class": "map-pin-ellipse",
+    "unicode": ""
+  },
+  {
+    "font_class": "medal",
+    "unicode": ""
+  },
+  {
+    "font_class": "medal-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "mic",
+    "unicode": ""
+  },
+  {
+    "font_class": "mic-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "micoff",
+    "unicode": ""
+  },
+  {
+    "font_class": "micoff-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "minus",
+    "unicode": ""
+  },
+  {
+    "font_class": "minus-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "more",
+    "unicode": ""
+  },
+  {
+    "font_class": "more-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "navigate",
+    "unicode": ""
+  },
+  {
+    "font_class": "navigate-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "notification",
+    "unicode": ""
+  },
+  {
+    "font_class": "notification-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "paperclip",
+    "unicode": ""
+  },
+  {
+    "font_class": "paperplane",
+    "unicode": ""
+  },
+  {
+    "font_class": "paperplane-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "person",
+    "unicode": ""
+  },
+  {
+    "font_class": "person-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "personadd",
+    "unicode": ""
+  },
+  {
+    "font_class": "personadd-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "personadd-filled-copy",
+    "unicode": ""
+  },
+  {
+    "font_class": "phone",
+    "unicode": ""
+  },
+  {
+    "font_class": "phone-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "plus",
+    "unicode": ""
+  },
+  {
+    "font_class": "plus-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "plusempty",
+    "unicode": ""
+  },
+  {
+    "font_class": "pulldown",
+    "unicode": ""
+  },
+  {
+    "font_class": "pyq",
+    "unicode": ""
+  },
+  {
+    "font_class": "qq",
+    "unicode": ""
+  },
+  {
+    "font_class": "redo",
+    "unicode": ""
+  },
+  {
+    "font_class": "redo-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "refresh",
+    "unicode": ""
+  },
+  {
+    "font_class": "refresh-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "refreshempty",
+    "unicode": ""
+  },
+  {
+    "font_class": "reload",
+    "unicode": ""
+  },
+  {
+    "font_class": "right",
+    "unicode": ""
+  },
+  {
+    "font_class": "scan",
+    "unicode": ""
+  },
+  {
+    "font_class": "search",
+    "unicode": ""
+  },
+  {
+    "font_class": "settings",
+    "unicode": ""
+  },
+  {
+    "font_class": "settings-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "shop",
+    "unicode": ""
+  },
+  {
+    "font_class": "shop-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "smallcircle",
+    "unicode": ""
+  },
+  {
+    "font_class": "smallcircle-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "sound",
+    "unicode": ""
+  },
+  {
+    "font_class": "sound-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "spinner-cycle",
+    "unicode": ""
+  },
+  {
+    "font_class": "staff",
+    "unicode": ""
+  },
+  {
+    "font_class": "staff-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "star",
+    "unicode": ""
+  },
+  {
+    "font_class": "star-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "starhalf",
+    "unicode": ""
+  },
+  {
+    "font_class": "trash",
+    "unicode": ""
+  },
+  {
+    "font_class": "trash-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "tune",
+    "unicode": ""
+  },
+  {
+    "font_class": "tune-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "undo",
+    "unicode": ""
+  },
+  {
+    "font_class": "undo-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "up",
+    "unicode": ""
+  },
+  {
+    "font_class": "top",
+    "unicode": ""
+  },
+  {
+    "font_class": "upload",
+    "unicode": ""
+  },
+  {
+    "font_class": "upload-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "videocam",
+    "unicode": ""
+  },
+  {
+    "font_class": "videocam-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "vip",
+    "unicode": ""
+  },
+  {
+    "font_class": "vip-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "wallet",
+    "unicode": ""
+  },
+  {
+    "font_class": "wallet-filled",
+    "unicode": ""
+  },
+  {
+    "font_class": "weibo",
+    "unicode": ""
+  },
+  {
+    "font_class": "weixin",
+    "unicode": ""
+  }
+];
+exports.fontData = fontData;