當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

2.页面绘制和引入组件库uView

發布時間：2023/12/15 综合教程 36 生活家

生活随笔收集整理的這篇文章主要介紹了 2.页面绘制和引入组件库uView 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.頁面繪制——首頁

1.滑塊視圖容器swiper。

通過文字+背景顏色的形式，而不是banner圖的形式，節省以后的工作量。

在index.vue中有關swiper的代碼：

<template>
    <view class="content">
        <swiper :indicator-dots="true" :autoplay="true"  class="banner">
            <swiper-item>
            　　<view class="swiper-item">ABCDEFGHIJKLMNOPQRSTUVWXYZ</view>
            </swiper-item>
            <swiper-item>
            　　<view class="swiper-item">B</view>
            </swiper-item>
            <swiper-item>
            　　<view class="swiper-item">ABCDEFGHIJKLMNOPQRSTUVWXYZ</view>
            </swiper-item>
            <swiper-item>
            　　<view class="swiper-item">ABCDEFGHIJKLMNOPQRSTUVWXYZ</view>
            </swiper-item>
        </swiper>
        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .banner{
        width:100%;
        height:400upx;
        
    }
    .swiper-item{
        background-color: #E4E7ED;
        width: 100%;
        height: 100%;
        color: #000000;    
        
        display: flex;
        word-break: break-word;
        align-items: center;
        justify-content: space-around;
        font-size: 20px;
        
        
    }
    
</style>

2.引入組件庫uView

在uni-app插件市場中，找到的一個UI組件庫，uView。

地址：

https://ext.dcloud.net.cn/plugin?id=1593

官方文檔：

https://www.uviewui.com/components/intro.html

下載后，將uview-ui目錄復制粘貼到項目目錄下

1.想main.js中引入：

import uView from 'uview-ui';
Vue.use(uView);

2.App.vue引入基礎樣式(注意style標簽需聲明scss屬性支持)

<style lang="scss">
@import "uview-ui/index.scss";
</style>

3.uni.scss引入全局scss變量文件

/* uni.scss */
@import "uview-ui/theme.scss";

4.pages.json配置easycom規則(按需引入)

     "easycom": {
            // 下載安裝的方式需要前面的"@/"，npm安裝的方式無需"@/"
            // 下載安裝方式
            "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
            // npm安裝方式
            // "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
        },

3.滾動通知欄

index.vue中相關代碼：

<template>
    <view class="content">
        <u-notice-bar mode="horizontal" type="none" :list="list"></u-notice-bar>
    </view>
</template>

<script>
    
    export default {
        data() {
            return {    
                list: [
                    '寒雨連江夜入吳',
                    '平明送客楚山孤',
                    '洛陽親友如相問',
                    '一片冰心在玉壺'
                ]
            }
        },
        onLoad() {
        },
        methods: {
        },
        
    }
</script>

4.Grid宮格布局

index.vue中相關代碼：

<template>
    <view class="content">
    
        <u-grid :col="2">
            <u-grid-item index="1" bg-color="#f4f4f5">
                
                <u-icon name="file-text-fill" :size="60"></u-icon>
                <view class="grid-text">暗部章程</view>
            </u-grid-item>
            <u-grid-item>
                <image src="https://cdn.uviewui.com/uview/grid/hot5.png" class="badge-icon"></image>
                <u-icon name="star-fill" :size="60"></u-icon>
                <view class="grid-text">加入暗部</view>
            </u-grid-item>
            <u-grid-item>
                <image src="https://cdn.uviewui.com/uview/grid/hot6.png" class="badge1-icon"></image>
                <u-icon name="more-circle-fill" :size="60"></u-icon>
                <view class="grid-text">用戶反饋</view>
            </u-grid-item>
            <u-grid-item bg-color="#f4f4f5">
                <u-icon name="plus-people-fill" :size="60"></u-icon>
                <view class="grid-text">用戶群</view>
            </u-grid-item>
            <u-grid-item bg-color="#f4f4f5">
                <u-icon name="chrome-circle-fill" :size="60"></u-icon>
                <view class="grid-text">暗部群</view>
            </u-grid-item>
        </u-grid>
        
    </view>
</template>

<script>
    
    export default {
        data() {
            return {    
            }
        },
        onLoad() {
        },
        methods: {
        },
        
    }
</script>

<style>
    .badge-icon {
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        width: 40rpx;
        height: 40rpx;
    }
    .badge1-icon {
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        width: 60rpx;
        height: 60rpx;
    }
</style>

5.補一些版權信息，對首頁再做一些修改

用Divider 分割線和Gap 間隔槽

index.vue的相關代碼：

<template>
    <view class="content">
            
        
        <u-gap height="80" bg-color="#fff"></u-gap>
        <u-divider color="#6d6d6d" half-width="80" border-color="#6d6d6d">?玩蛇的胖紙為網絡文學而開發</u-divider>
        <u-gap height="80" bg-color="#fff"></u-gap>
        
    </view>
</template>

修改后的index.vue：

 1 <template>
 2     <view class="content">
 3         <swiper :indicator-dots="true" :autoplay="true"  class="banner">
 4             <swiper-item v-for="(item,index) in list" :key="index">
 5             　　<view class="swiper-item">{{item}}</view>
 6             </swiper-item>
 7         </swiper>
 8         
 9         <u-notice-bar mode="horizontal" type="none" :list="list"></u-notice-bar>
10         
11             
12         <u-grid :col="2">
13             <u-grid-item index="1" bg-color="#f4f4f5">
14                 <u-icon name="file-text-fill" :size="60"></u-icon>
15                 <view class="grid-text">暗部章程</view>
16             </u-grid-item>
17             <u-grid-item>
18                 <image src="https://cdn.uviewui.com/uview/grid/hot5.png" class="badge-icon"></image>
19                 <u-icon name="star-fill" :size="60"></u-icon>
20                 <view class="grid-text">加入暗部</view>
21             </u-grid-item>
22             <u-grid-item>
23                 <image src="https://cdn.uviewui.com/uview/grid/hot6.png" class="badge1-icon"></image>
24                 <u-icon name="more-circle-fill" :size="60"></u-icon>
25                 <view class="grid-text">用戶反饋</view>
26             </u-grid-item>
27             <u-grid-item bg-color="#f4f4f5">
28                 <u-icon name="plus-people-fill" :size="60"></u-icon>
29                 <view class="grid-text">用戶群</view>
30             </u-grid-item>
31             <u-grid-item bg-color="#f4f4f5">
32                 <u-icon name="red-packet-fill" :size="60" color="#fa3534"></u-icon>
33                 <view class="grid-text">捐贈暗部</view>
34             </u-grid-item>
35         </u-grid>
36             
37         
38         <u-gap height="80" bg-color="#fff"></u-gap>
39         <u-divider color="#6d6d6d" half-width="80" border-color="#6d6d6d">?玩蛇的胖紙為網絡文學而開發</u-divider>
40         <u-gap height="80" bg-color="#fff"></u-gap>
41         
42     </view>
43 </template>
44 
45 <script>
46     
47     export default {
48         data() {
49             return {    
50                 list: [
51                     '寒雨連江夜入吳',
52                     '平明送客楚山孤',
53                     '洛陽親友如相問',
54                     '一片冰心在玉壺'
55                 ]
56             }
57         },
58         onLoad() {
59         },
60         methods: {
61         },
62         
63     }
64 </script>
65 
66 <style>
67     .banner{
68         width:100%;
69         height:400upx;
70         
71     }
72     .swiper-item{
73         background-color: #E4E7ED;
74         width: 100%;
75         height: 100%;
76         color: #000000;
77         
78         display: flex;
79         word-break: break-word;
80         align-items: center;
81         justify-content: space-around;
82         font-size: 20px;
83     }
84     .badge-icon {
85         position: absolute;
86         top: 30rpx;
87         right: 30rpx;
88         width: 40rpx;
89         height: 40rpx;
90     }
91     .badge1-icon {
92         position: absolute;
93         top: 0rpx;
94         right: 0rpx;
95         width: 60rpx;
96         height: 60rpx;
97     }
98 </style>

View Code

效果圖：

總結

以上是生活随笔為你收集整理的2.页面绘制和引入组件库uView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：分区供水条件口诀_口诀记忆 | 消防给水
下一篇： asp.net mvc项目实例_降龙-第