For mobile side response.

tangbc · tangbc · commit 5a5fa3bab440 · 2017-07-01T19:53:26.000+08:00
diff --git a/examples/build/finite.js b/examples/build/finite.js
diff --git a/examples/build/infinite.js b/examples/build/infinite.js
diff --git a/examples/finite/finite.vue b/examples/finite/finite.vue
@@ -3,7 +3,7 @@
         <div class="scrollToIndex">
             <span>Scroll to index</span>
             <input type="text" v-model.number.lazy="startIndex">
-            <small>Change and blur to set startIndex.</small>
+            <small>Change and blur to set start index.</small>
         </div>
         <VirtualList :size="50" :remain="6" class="list" :start="startIndex">
             <Item v-for="(udf, index) of items" :index="index" :key="index"></Item>
@@ -45,6 +45,9 @@
         border: 1px solid;
         border-color: #dddddd;
         font-size: 16px;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
     }
     input:focus {
         border-color: #6495ed;
@@ -68,5 +71,10 @@
         text-decoration: none;
         font-weight: 100;
     }
+    @media (max-width: 640px) {
+        small {
+            display: none;
+        }
+    }
 </style>
 
diff --git a/examples/finite/index.html b/examples/finite/index.html
@@ -13,15 +13,23 @@
         margin: 0 auto;
         overflow-y: auto;
     }
-    @media (max-width: 1024px) {
+    .title {
+        font-size: 25px;
+        font-weight: 100;
+        text-align: center;
+    }
+    @media (max-width: 640px) {
         .appWraper {
             width: 100%;
         }
+        .title {
+            font-size: 16px;
+        }
     }
     </style>
 </head>
 <body>
-    <h1 style="font-size: 25px;font-weight: 100;text-align: center;">
+    <h1 class="title">
         Vue virtual list, with 100,000 finite data.
     </h1>
     <div class="appWraper">
diff --git a/examples/infinite/index.html b/examples/infinite/index.html
@@ -12,15 +12,23 @@
         width: 440px;
         margin: 0 auto;
     }
+    .title {
+        font-size: 25px;
+        font-weight: 100;
+        text-align: center;
+    }
     @media (max-width: 1024px) {
         .appWraper {
             width: 100%;
         }
+        .title {
+            font-size: 16px;
+        }
     }
     </style>
 </head>
 <body>
-    <h1 style="font-size: 25px;font-weight: 100;text-align: center;">
+    <h1 class="title">
         Vue virtual list, infinite data by requesting 20 each time.
     </h1>
     <div class="appWraper">
diff --git a/examples/infinite/infinite.vue b/examples/infinite/infinite.vue
@@ -15,7 +15,9 @@
             <Loading class="list-loading" :loading="loading"></Loading>
         </div>
         <div class="source">
-            <a href="https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/infinite/infinite.vue#L1">View this demo source code</a>
+            <a href="https://github.com/tangbc/vue-virtual-scroll-list/blob/master/examples/infinite/infinite.vue#L1">
+                View this demo source code
+            </a>
         </div>
     </div>
 </template>
@@ -92,5 +94,13 @@
         text-decoration: none;
         font-weight: 100;
     }
+    @media (max-width: 640px) {
+        .times, .count {
+            display: block;
+        }
+        .count {
+            position: relative;
+        }
+    }
 </style>
 
