使用瀑布流视图

Gandum2077 · Mar 11, 2020 · 4d5781c · 4d5781c
1 parent cd2710f
commit 4d5781c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 13 deletions.
diff --git a/config.json b/config.json
@@ -2,7 +2,7 @@
   "info": {
     "name": "JSBooru",
     "url": "",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "author": "Gandum2077",
     "website": "https://github.com/Gandum2077/JSBooru",
     "types": 1

diff --git a/scripts/controller.js b/scripts/controller.js
@@ -58,19 +58,30 @@ class Controller {
       }
     });
     this.views.booruView = new ContentView({
+      bgcolor: $color("#333"),
       layout: (make, view) => {
         make.left.right.top.inset(0);
         make.bottom.equalTo(this.views.footerBar.view.top);
       }
     });
     this.views.favoritesView = new ContentView({
+      bgcolor: $color("#333"),
       layout: (make, view) => {
         make.left.right.top.inset(0);
         make.bottom.equalTo(this.views.footerBar.view.top);
       }
     });
     this.views.thumbnailsViewBooru = new ThumbnailsView({
+      layout: (make, view) => {
+        make.left.right.bottom.inset(0)
+        make.top.inset(36)
+      },
       events: {
+        itemSize: function(sender, indexPath) {
+          const index = indexPath.item
+          const info = classThis.booruItems[index]
+          return $size(info.width, info.height)
+        },
         pulled: async function(sender) {
           if (classThis.isLoading) {
             sender.endRefreshing();
@@ -115,7 +126,16 @@ class Controller {
       }
     });
     this.views.thumbnailsViewFavorites = new ThumbnailsView({
+      layout: (make, view) => {
+        make.left.right.bottom.inset(0)
+        make.top.inset(36)
+      },
       events: {
+        itemSize: function(sender, indexPath) {
+          const index = indexPath.item
+          const info = classThis.favoritesItems[index]
+          return $size(info.width, info.height)
+        },
         pulled: async function(sender) {
           classThis.loadFavorites({
             startPage: classThis.favoritesInfo.startPage
@@ -140,8 +160,8 @@ class Controller {
         didReachBottom: async function(sender) {
           const result = classThis.generatorFavorites.next();
           if (!result.done) {
-            ITEMS.push(...result.value);
-            sender.data = getDataForListView(ITEMS);
+            classThis.favoritesItems.push(...result.value);
+            classThis.views.thumbnailsViewFavorites.items = classThis.favoritesItems;
           }
           sender.endFetchingMore();
         }

diff --git a/scripts/views/tagsView.js b/scripts/views/tagsView.js
@@ -65,11 +65,13 @@ class Menu extends BaseView {
 }
 
 class ListView extends BaseView {
-  constructor() {
+  constructor({searchEvent}) {
     super();
+    this.searchEvent = searchEvent
   }
 
   _defineView() {
+    const classThis = this
     return {
       type: "list",
       props: {
@@ -110,6 +112,12 @@ class ListView extends BaseView {
       layout: (make, view) => {
         make.left.right.bottom.inset(0);
         make.top.equalTo(view.prev.bottom);
+      },
+      events: {
+        didSelect: (sender, indexPath, data) => {
+          const name = classThis._rawData[indexPath.item].name
+          classThis.searchEvent(name)
+        }
       }
     };
   }
@@ -119,6 +127,7 @@ class ListView extends BaseView {
       if (!text) return 0;
       return text.length;
     };
+    this._rawData = items
     this.view.data = items.map(n => {
       return {
         label: {
@@ -172,7 +181,7 @@ class TagsView extends BaseView {
       items: [...FIXED_ITEMS, ...constants.userConfig.tag_categoires],
       changedEvent: text => classThis.reload()
     });
-    this.listView = new ListView();
+    this.listView = new ListView({searchEvent: this.searchEvent});
     return {
       type: "view",
       props: {

diff --git a/scripts/views/thumbnailsView.js b/scripts/views/thumbnailsView.js
@@ -13,17 +13,10 @@ class ThumbnailsView extends BaseView {
       type: "matrix",
       props: {
         id: this.id,
-        square: true,
+        waterfall: true,
         columns: this.columns,
         spacing: 5,
         bgcolor: $color("#333"),
-        header: {
-          type: "view",
-          props: {
-            height: 36,
-            bgcolor: $color("clear")
-          }
-        },
         template: {
           props: {
             bgcolor: $color("clear")