完善演示例细节

pages/API/element-takesnapshot/element-takesnapshot.uvue

@@ -3,9 +3,7 @@
     <page-head id="page-head" title="getElementById"></page-head>
     <view class="uni-padding-wrap" id="snapshot-content">
       <text id="text">this is text</text>
-      <view id="view" class="uni-common-mt" style="border: 1px solid red"
-        >this is view</view
-      >
+      <view id="view" class="uni-common-mt" style="border: 1px solid red">this is view</view>
       <button class="uni-btn" @click="changeViewStyle">
         修改 view 宽高及背景色
       </button>
@@ -14,20 +12,20 @@
         点击截图
       </button>
     </view>
-    <image style="margin-top: 20px;" :src="snapImage" mode="aspectFit"></image>
+    <image style="margin-top: 20px;" :src="snapImage" mode="aspectFit" @longpress="saveToAlbum"></image>
   </view>
 </template>
 
 <script lang="uts">
-export default {
+  export default {
     data() {
       return {
-      snapImage:"/static/uni.png"
+        snapImage: "/static/uni.png"
       }
     },
     methods: {
 
-    changeViewStyle(){
+      changeViewStyle() {
         const text = uni.getElementById('text')!
         text.style.setProperty('color', 'red')
 
@@ -36,25 +34,56 @@ export default {
         view.style.setProperty('height', '50px')
         view.style.setProperty('backgroundColor', '#007AFF')
       },
-    takeSnapshotClick(){
+      takeSnapshotClick() {
         const view = uni.getElementById('snapshot-content')!
         view.takeSnapshot({
-        success:function(res:TakeSnapshotSuccess){
+          success: function (res : TakeSnapshotSuccess) {
             console.log(res.tempFilePath)
             this.snapImage = res.tempFilePath
             uni.showToast({
-            title:'截图成功'
+              title: '截图成功，路径：' + res.tempFilePath,
+              icon: "none"
             })
           },
-        fail:function(res:TakeSnapshotFail){
+          fail: function (res : TakeSnapshotFail) {
             console.log(res)
             uni.showToast({
-            icon:'error',
-            title:'截图失败'
+              icon: 'error',
+              title: '截图失败'
             })
           }
         } as TakeSnapshotOptions)
+      },
+      saveToAlbum(e : TouchEvent) {
+        // console.log(e.currentTarget!.getAttribute("src"));
+        let filePath : string = e.currentTarget!.getAttribute("src") as string
+        uni.showActionSheet({
+          itemList: ["保存"],
+          success: res => {
+            // console.log(res.tapIndex);
+            if (res.tapIndex == 0) {
+              uni.saveImageToPhotosAlbum({
+                filePath: filePath,
+                success() {
+                  uni.showToast({
+                    position: "center",
+                    icon: "none",
+                    title: "图片保存成功，请到手机相册查看"
+                  })
+                },
+                fail(e) {
+                  uni.showModal({
+                    content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
+                    showCancel: false
+                  });
+                }
+              })
+            }
+          },
+          fail: () => { },
+          complete: () => { }
+        });
+      }
     }
   }
-}
 </script>

pages/component/sticky-header/sticky-header.uvue

@@ -16,7 +16,7 @@
       <scroll-view style="background-color: #f5f5f5; flex-direction: row;" :scroll-x="true" :scroll-y="false" :show-scrollbar="false">
         <view class="flex-row" style="align-self: flex-start; flex-direction: row;">
           <text ref="swipertab" class="sift-item"
-            v-for="name in sift_item" @click="">
+            v-for="(name,index) in sift_item" @click="clickTH(index)">
             {{name}}
           </text>
         </view>
@@ -57,6 +57,9 @@
 			},
 			confirm_scroll_top_input(value : number) {
 			  this.scroll_top_input = value
+			},
+      clickTH(index:number){
+        console.log("点击表头：" + index);
       }
 		}
 	}

pages/template/list-news/list-news.uvue

 <template>
-	<view style="width: 100%;height: 100%;">
-		<view class="banner" @click="bannerClick(banner)">
+  <list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
+    :refresher-triggered="refresherTriggered">
+    <list-item class="banner" @click="bannerClick(banner)">
       <image class="banner-img" :src="banner.cover"></image>
       <text class="banner-title">{{ banner.title }}</text>
+    </list-item>
+    <sticky-header>
+      <view style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
+        <button style="height: 40px;font-size: 13px;" v-for="(name,index) in th_item" @click="clickTH(index)">
+          {{name}}
+        </button>
       </view>
-		<list-view class="uni-list-content" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
-			:refresher-triggered="refresherTriggered" scroll-y = true>
+    </sticky-header>
     <list-item v-for="(value, index) in listData" :key="index">
       <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
         <view class="uni-media-list">
@@ -21,27 +27,27 @@
       </view>
     </list-item>
   </list-view>
-	</view>
 </template>
 
 <script>
   type Banner = {
-		cover: string | null,
-		title: string | null,
-		post_id: string | null
+    cover : string | null,
+    title : string | null,
+    post_id : string | null
   }
   type Item = {
-		author_name: string,
-		cover: string,
-		id: number,
-		post_id: string,
-		published_at: string,
-		title: string
+    author_name : string,
+    cover : string,
+    id : number,
+    post_id : string,
+    published_at : string,
+    title : string
   }
 
   export default {
     data() {
       return {
+        th_item: ["排序", "筛选"],
         refresherTriggered: false,
         banner: {} as Banner,
         listData: [] as Item[],
@@ -66,11 +72,11 @@
           url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
           data: data,
           success: data => {
-						if(this.pageVisible){
+            if (this.pageVisible) {
               this.refresherTriggered = false
               if (data.statusCode == 200) {
                 const result = data.data
-                if(result != null){
+                if (result != null) {
                   this.banner = result;
                 }
               }
@@ -92,13 +98,13 @@
 
         uni.request<Item[]>({
           url: url,
-					method:"GET",
+          method: "GET",
           success: (res) => {
-						if(this.pageVisible){
+            if (this.pageVisible) {
               if (res.statusCode == 200) {
                 console.log(res);
                 const result = res.data
-								if(result != null){
+                if (result != null) {
                   this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
                   // this.listData.push(...result)
                   // this.last_id = this.listData[0].id + "";
@@ -108,14 +114,14 @@
             }
           },
           fail: (res) => {
-						if(this.pageVisible){
+            if (this.pageVisible) {
               console.log('fail', res);
               this.refresherTriggered = false
             }
           }
         });
       },
-			goDetail(e: Item) {
+      goDetail(e : Item) {
         const detail = e;
         const post_id = detail.post_id;
         const cover = detail.cover;
@@ -124,7 +130,7 @@
           url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
         });
       },
-			bannerClick(e:Banner){
+      bannerClick(e : Banner) {
         const detail = e;
         const post_id = detail.post_id;
         const cover = detail.cover;
@@ -133,8 +139,14 @@
           url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
         });
       },
+      clickTH(index:number){
+        uni.showModal({
+          content: "点击表头项：" + index,
+          showCancel: false
+        });
+      },
       onRefresherrefresh() {
-				if(this.pageVisible){
+        if (this.pageVisible) {
           this.refresherTriggered = true
           this.getBanner();
           this.getList();
@@ -188,7 +200,7 @@
     justify-content: space-around;
   }
 
-	.uni-list-content{
+  .uni-list-content {
     background-color: #FFFFFF;
     position: relative;
     display: flex;
@@ -200,7 +212,7 @@
   .uni-media-list-text-top {
     /* height: 74rpx; */
     font-size: 28rpx;
-		lines:2;
+    lines: 2;
     overflow: hidden;
   }