Merge branch 'dev' into alpha

manifest.json

-{
-  "name": "hello-uniapp x",
-  "appid": "__UNI__3584C99",
-  "description": "",
-  "versionName": "1.0.11",
-  "versionCode": 10011,
-  "uni-app-x":
-  {
-  },
-    /* 快应用特有相关 */
-  "quickapp":
-  {
-  },
-    /* 小程序特有相关 */
-  "mp-weixin":
-  {
-    "appid": "",
-    "setting":
-    {
-      "urlCheck": false
-    },
-    "usingComponents": true
-  },
-  "mp-alipay":
-  {
-    "usingComponents": true
-  },
-  "mp-baidu":
-  {
-    "usingComponents": true
-  },
-  "mp-toutiao":
-  {
-    "usingComponents": true
-  },
-  "uniStatistics":
-  {
-    "enable": false
-  },
-  "app":
-  {
-  },
-  "vueVersion": "3"
-}
\ No newline at end of file
+{
+    "name" : "hello-uniapp x",
+    "appid" : "__UNI__3584C99",
+    "description" : "",
+    "versionName" : "1.0.14",
+    "versionCode" : 10014,
+    "uni-app-x" : {},
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "app" : {},
+    "vueVersion" : "3"
+}

pages.json

@@ -714,31 +714,31 @@
     {
       "path": "pages/API/request/request",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "request"
       }
     },
     {
       "path": "pages/API/upload-file/upload-file",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "upload-file"
       }
     },
     {
       "path": "pages/API/download-file/download-file",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "download-file"
       }
     },
     {
       "path": "pages/API/websocket-socketTask/websocket-socketTask",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "websocket-socketTask"
       }
     },
     {
       "path": "pages/API/websocket-global/websocket-global",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "websocket-global"
       }
     },
     {
@@ -756,31 +756,31 @@
     {
       "path": "pages/API/get-system-info/get-system-info",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "get-system-info"
       }
     },
     {
       "path": "pages/API/get-device-info/get-device-info",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "get-device-info"
       }
     },
     {
       "path": "pages/API/get-app-base-info/get-app-base-info",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "get-app-base-info"
       }
     },
     {
       "path": "pages/API/get-system-setting/get-system-setting",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "get-system-setting"
       }
     },
     {
       "path": "pages/API/get-app-authorize-setting/get-app-authorize-setting",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "get-app-authorize-setting"
       }
     },
     {
@@ -822,7 +822,7 @@
     {
       "path": "pages/API/get-network-type/get-network-type",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "get-network-type"
       }
     },
     {
@@ -907,7 +907,7 @@
     {
       "path": "pages/API/get-window-info/get-window-info",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "get-window-info"
       }
     },
     {
@@ -919,9 +919,16 @@
     {
       "path": "pages/template/long-list/long-list",
       "style": {
-        "navigationBarTitleText": "复杂长列表",
+        "navigationBarTitleText": "顶部搜索框随时下移长列表",
         "enablePullDownRefresh": true
       }
+    },
+    {
+      "path": "pages/template/long-list2/long-list2",
+      "style": {
+        "navigationBarTitleText": "顶部banner长列表",
+        "enablePullDownRefresh": true
+      }
     },
     {
       "path": "pages/component/list-view/list-view",
@@ -1002,7 +1009,7 @@
     },
     {
       "path" : "pages/API/element-draw/element-draw",
-      "style" : 
+      "style" :
       {
         "navigationBarTitleText" : "getDrawableContext",
         "enablePullDownRefresh" : false
@@ -1010,7 +1017,7 @@
     },
     {
       "path" : "pages/component/general-event/transition-event",
-      "style" : 
+      "style" :
       {
         "navigationBarTitleText" : "transitionend事件",
         "enablePullDownRefresh" : false

pages/API/choose-image/choose-image.uvue

@@ -285,6 +285,7 @@
   .crop-option {
     border-top-color: lightgray;
     border-width: 1rpx;
+    border-style: solid;
     padding: 20rpx;
     transition: height;
     transition-duration: 300;

pages/API/preview-image/preview-image.uvue

@@ -136,6 +136,7 @@ export default {
 
 .cell-choose-image {
   border-width: 1px;
+  border-style: solid;
   border-color: lightgray;
 }
 

pages/API/request/request.uvue

 <template>
   <view style="flex: 1;">
     <view class="uni-padding-wrap uni-common-mt">
-      <view class="uni-common-mt" style="border-width: 2rpx;border-radius: 4rpx;">
+      <view class="uni-common-mt" style="border-width: 2rpx;border-style: solid; border-radius: 4rpx;">
         <textarea :value="res" class="uni-textarea"></textarea>
       </view>
       <view>

pages/tabBar/template.uvue

@@ -82,10 +82,19 @@ export default {
         {
           id: 'long-list',
           url: 'long-list',
-          name: '复杂长列表',
+          name: '左右滑动长列表',
           open: false,
           enable: true,
-          pages: [] as Page[],
+          pages: [
+            {
+              name: '顶部搜索框随时下移长列表',
+              url:'long-list'
+            },
+            {
+              name: '顶部banner长列表',
+              url:'long-list2'
+            },
+          ] as Page[],
         },
         {
           id: 'list-news',

pages/template/long-list2/long-list2.uvue

+<template>
+  <scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
+    @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
+    <swiper ref="header" indicator-dots="true" circular="true">
+      <swiper-item  v-for="i in 3" :item-id="i">
+        <image src="/static/shuijiao.jpg" style="height: 240px;"></image>
+        <text style="position: absolute;">{{i}}</text>
+      </swiper-item>
+    </swiper>
+    <view class="swiper-list">
+      <scroll-view ref="tabScroll" class="swiper-tabs" :scroll-x="true" :show-scrollbar="false">
+        <view class="flex-row" style="align-self: flex-start;">
+          <text ref="swipertab" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
+            v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)">
+            {{item.name}}
+          </text>
+        </view>
+        <view ref="indicator" class="swiper-tabs-indicator"></view>
+      </scroll-view>
+      <swiper ref="swiper" class="swiper-view" :current="swiperIndex" @transition="onSwiperTransition"
+        @animationfinish="onSwiperAnimationfinish">
+        <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
+          <long-page ref="longPage" :type="item.type" :preload="item.preload"></long-page>
+        </swiper-item>
+      </swiper>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+  import { ComponentPublicInstance } from 'vue';
+  import longPage from '../long-list/long-list-page.uvue';
+
+  type SwiperTabsItem = {
+    x : number,
+    w : number
+  }
+
+  type SwiperViewItem = {
+    type : string,
+    name : string,
+    preload : boolean,
+  }
+
+  /**
+   * 根据权重在两个值之间执行线性插值.
+   * @constructor
+   * @param {number} value1 - 第一个值，该值应为下限.
+   * @param {number} value2 - 第二个值，该值应为上限.
+   * @param {number} amount - 应介于 0 和 1 之间，指示内插的权重.
+   * @returns {number} 内插值
+   */
+  function lerpNumber(value1 : number, value2 : number, amount : number) : number {
+    return (value1 + (value2 - value1) * amount)
+  }
+
+  export default {
+    components: {
+      longPage
+    },
+    data() {
+      return {
+        swiperList: [
+          {
+            type: 'UpdatedDate',
+            name: '最新上架',
+            preload: true
+          } as SwiperViewItem,
+          {
+            type: 'FreeHot',
+            name: '免费热榜'
+          } as SwiperViewItem,
+          {
+            type: 'PaymentHot',
+            name: '付费热榜'
+          } as SwiperViewItem,
+          {
+            type: 'HotList',
+            name: '热门总榜'
+          } as SwiperViewItem
+        ] as SwiperViewItem[],
+        swiperIndex: -1,
+        $pageScrollView: null as null | Element,
+        $headerHeight: 0,
+        $animationFinishIndex: 0,
+        $tabScrollView: null as null | Element,
+        $indicatorNode: null as null | Element,
+        $swiperWidth: 0,
+        $swiperTabsRect: [] as SwiperTabsItem[]
+      }
+    },
+    onReady() {
+      this.$pageScrollView = this.$refs['pageScrollView'] as Element;
+      this.$headerHeight = (this.$refs['header'] as Element).offsetHeight
+      this.$swiperWidth = (this.$refs['swiper'] as Element).getBoundingClientRect().width
+      this.$tabScrollView = this.$refs['tabScroll'] as Element
+      this.$indicatorNode = this.$refs['indicator'] as Element
+      this.cacheTabItemsSize()
+      this.setSwiperIndex(0, true)
+    },
+    onPullDownRefresh() {
+      (this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
+        uni.stopPullDownRefresh()
+      })
+    },
+    methods: {
+      // TODO
+      onStartNestedScroll(_ : StartNestedScrollEvent) : boolean {
+        return true
+      },
+      onNestedPreScroll(event : NestedPreScrollEvent) {
+        const deltaY = event.deltaY
+        const scrollTop = this.$pageScrollView!.scrollTop
+
+        if (deltaY > 0) {
+          // 向上滚动，如果父容器 header scrollTop < offsetHeight，先滚动父容器
+          if (scrollTop < this.$headerHeight) {
+            const difference = this.$headerHeight - scrollTop - deltaY
+            if (difference > 0) {
+              this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
+              event.consumed(event.deltaX, deltaY)
+            } else {
+              const top : number = deltaY + difference
+              event.consumed(event.deltaX, top.toFloat())
+              this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
+            }
+          }
+        }
+      },
+      onTabClick(index : number) {
+        this.setSwiperIndex(index, false)
+      },
+      onSwiperTransition(e : SwiperTransitionEvent) {
+        // 微信 skyline 每项完成触发 Animationfinish，偏移值重置
+        // 微信 webview 全部完成触发 Animationfinish，偏移值累加
+        // 在滑动到下一个项的过程中，再次反向滑动，偏移值递减
+        // uni-app-x 和微信 webview 行为一致
+
+        const offset_x = e.detail.dx
+
+        // 计算当前索引并重置差异
+        const current_offset_x = offset_x % this.$swiperWidth
+        const current_offset_i = offset_x / this.$swiperWidth
+        const current_index = this.$animationFinishIndex + current_offset_i.toInt()
+
+        // 计算目标索引及边界检查
+        let move_to_index = current_index
+        if (current_offset_x > 0 && move_to_index < this.swiperList.length - 1) {
+          move_to_index += 1
+        } else if (current_offset_x < 0 && move_to_index > 0) {
+          move_to_index -= 1
+        }
+
+        // 计算偏移百分比
+        const percentage = Math.abs(current_offset_x) / this.$swiperWidth
+
+        // 通知更新指示线
+        this.updateTabIndicator(current_index, move_to_index, percentage)
+
+        // 首次可见时初始化数据
+        this.initSwiperItemData(move_to_index)
+      },
+      onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
+        this.setSwiperIndex(e.detail.current, true)
+        this.$animationFinishIndex = e.detail.current
+      },
+      cacheTabItemsSize() {
+        this.$swiperTabsRect.length = 0
+        const tabs = this.$refs["swipertab"] as Element[]
+        tabs.forEach((node) => {
+          this.$swiperTabsRect.push({
+            x: node.offsetLeft,
+            w: node.offsetWidth
+          } as SwiperTabsItem)
+        })
+      },
+      setSwiperIndex(index : number, updateIndicator : boolean) {
+        if (this.swiperIndex === index) {
+          return
+        }
+
+        this.swiperIndex = index
+
+        this.initSwiperItemData(index)
+
+        if (updateIndicator) {
+          this.updateTabIndicator(index, index, 1)
+        }
+      },
+      updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
+        const current_size = this.$swiperTabsRect[current_index]
+        const move_to_size = this.$swiperTabsRect[move_to_index]
+
+        // 计算指示线 左边距 和 宽度 在移动过程中的线性值
+        const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
+        const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)
+
+        // 更新指示线
+        const x = indicator_line_x + indicator_line_w / 2
+        this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
+
+        // 滚动到水平中心位置
+        const scroll_x = x - this.$swiperWidth / 2
+        this.$tabScrollView?.setAttribute('scrollLeft', scroll_x)
+      },
+      initSwiperItemData(index : number) {
+        if (!this.swiperList[index].preload) {
+          this.swiperList[index].preload = true;
+          (this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData', null)
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .page {
+    flex: 1;
+  }
+
+  .search-bar {
+    padding: 10px;
+  }
+
+  .swiper-list {
+    height: 100%;
+  }
+
+  .swiper-tabs {
+    background-color: #ffffff;
+    flex-direction: column;
+  }
+
+  .swiper-tabs-item {
+    color: #555;
+    font-size: 16px;
+    padding: 12px 25px;
+  }
+
+  .swiper-tabs-item-active {
+    color: #007AFF;
+  }
+
+  .swiper-tabs-indicator {
+    width: 1px;
+    height: 2px;
+    background-color: #007AFF;
+  }
+
+  .swiper-view {
+    flex: 1;
+  }
+
+  .swiper-item {
+    flex: 1;
+  }
+</style>