更新picker-view示例

更新picker-view示例

docs/component/picker-view.md

@@ -28,14 +28,16 @@
 **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/picker-view/picker-view)
 
 以下示例代码，来自于[hello uni-app项目](https://github.com/dcloudio/hello-uniapp)，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
-```html
+
+
+```javascript
 <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
 <template>
     <view>
         <view class="uni-padding-wrap">
-			<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
-		</view>
-        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
+            <view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
+        </view>
+        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
             <picker-view-column>
                 <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
             </picker-view-column>
@@ -48,49 +50,61 @@
         </picker-view>
     </view>
 </template>
-```
-
-```javascript
-export default {
-    data: function () {
-        const date = new Date()
-        const years = []
-        const year = date.getFullYear()
-        const months = []
-        const month = date.getMonth() + 1
-        const days = []
-        const day = date.getDate()
-        for (let i = 1990; i <= date.getFullYear(); i++) {
-            years.push(i)
-        }
-        for (let i = 1; i <= 12; i++) {
-            months.push(i)
-        }
-        for (let i = 1; i <= 31; i++) {
-            days.push(i)
-        }
-        return {
-            title: 'picker-view',
-            years,
-            year,
-            months,
-            month,
-            days,
-            day,
-            value: [9999, month - 1, day - 1],
-            visible: true,
-            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
-        }
-    },
-    methods: {
-        bindChange: function (e) {
-            const val = e.detail.value
-            this.year = this.years[val[0]]
-            this.month = this.months[val[1]]
-            this.day = this.days[val[2]]
+<script>
+    export default {
+        data: function () {
+            const date = new Date()
+            const years = []
+            const year = date.getFullYear()
+            const months = []
+            const month = date.getMonth() + 1
+            const days = []
+            const day = date.getDate()
+            for (let i = 1990; i <= date.getFullYear(); i++) {
+                years.push(i)
+            }
+            for (let i = 1; i <= 12; i++) {
+                months.push(i)
+            }
+            for (let i = 1; i <= 31; i++) {
+                days.push(i)
+            }
+            return {
+                title: 'picker-view',
+                years,
+                year,
+                months,
+                month,
+                days,
+                day,
+                value: [9999, month - 1, day - 1],
+                visible: true,
+                indicatorStyle: `height: 50px;`
+            }
+        },
+        methods: {
+            bindChange: function (e) {
+                const val = e.detail.value
+                this.year = this.years[val[0]]
+                this.month = this.months[val[1]]
+                this.day = this.days[val[2]]
+            }
         }
     }
-}
+</script>
+<style>
+    .picker-view {
+        width:750rpx;
+        height: 600rpx;
+        margin-top:20rpx;
+    }
+    .item {
+		height: 50px;
+		align-items: center;
+		justify-content: center;
+        text-align: center;
+    }
+</style>
 ```
 
 ![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/picker-view.png)