更新web-view示例

pages/component/web-view/web-view.uvue

@@ -6,24 +6,30 @@
     </web-view>
     <!-- #ifdef APP -->
     <view class="uni-padding-wrap uni-common-mt">
-      <view class="uni-input-v">
+      <view class="uni-btn-v">
         <input class="uni-input" confirmType="go" placeholder="输入网址跳转" @confirm="confirm" maxlength="-1"/>
       </view>
       <view class="uni-row uni-btn-v">
         <button class="uni-flex-item" type="primary" @click="back">后退</button>
-        <button class="uni-btn-ml uni-flex-item" type="primary" @click="forward">前进</button>
+        <button class="margin-left-5 uni-flex-item" type="primary" @click="forward">前进</button>
       </view>
       <view class="uni-row uni-btn-v">
         <button class="uni-flex-item" type="primary" @click="reload">重新加载</button>
-        <button class="uni-btn-ml uni-flex-item" type="primary" @click="stop">停止加载</button>
+        <button class="margin-left-5 uni-flex-item" type="primary" @click="stop">停止加载</button>
       </view>
       <view class="uni-btn-v">
         <button type="primary" @click="nativeToWeb">原生和Web通信</button>
       </view>
       <!-- #ifdef APP-ANDROID -->
-      <view class="uni-row">
-        <boolean-data :defaultValue="true" title="显示横向滚动条" @change="changeHorizontalScrollBarAccess"></boolean-data>
-        <boolean-data :defaultValue="true" title="显示竖向滚动条" @change="changeVerticalScrollBarAccess"></boolean-data>
+      <view class="uni-row uni-btn-v">
+        <view class="uni-row uni-flex-item align-items-center">
+          <text>显示横向滚动条</text>
+          <switch class="margin-left-5" :checked="true" @change="changeHorizontalScrollBarAccess"></switch>
+        </view>
+        <view class="uni-row uni-flex-item align-items-center">
+          <text>显示竖向滚动条</text>
+          <switch class="margin-left-5" :checked="true" @change="changeVerticalScrollBarAccess"></switch>
+        </view>
       </view>
       <!-- #endif -->
     </view>
@@ -97,22 +103,22 @@
         }
         this.src = url;
       },
-      changeHorizontalScrollBarAccess(checked : boolean) {
-        this.horizontalScrollBarAccess = checked;
+      changeHorizontalScrollBarAccess(event : UniSwitchChangeEvent) {
+        this.horizontalScrollBarAccess = event.detail.value;
       },
-      changeVerticalScrollBarAccess(checked : boolean) {
-        this.verticalScrollBarAccess = checked;
+      changeVerticalScrollBarAccess(event : UniSwitchChangeEvent) {
+        this.verticalScrollBarAccess = event.detail.value;
       }
     }
   }
 </script>
 
 <style>
-  .uni-input-v {
-    padding: 5px 0;
+  .margin-left-5 {
+    margin-left: 5px;
   }
 
-  .uni-btn-ml {
-    margin-left: 5px;
+  .align-items-center {
+    align-items: center;
   }
 </style>