微信小程序使用weui設計界面

微信小程序使用weui設計界面

剛入門微信小程序開發,使用微信web開發者工具,對界面的設計有時會有按鈕等的位置大小不好設置,但是微信web開發者工具有一個很好的工具是weui,WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,爲微信 Web 開發量身設計,可以令用戶的使用感知更加統一,包含button、cell、dialog、toast、article、icon等各式元素。weui 我們只需要他的樣式,引入微信UI庫即可,對weui的內容可以在官網上看到很詳細的介紹,在使用時需要對其中的代碼進行修改,下面是我的小程序中對基礎組建panel中圖文組合列表的使用:

Marker.wxml

<view class="page">

    <text class="t1">---採收記錄---</text>

    <view class="weui-panel weui-panel_access">

        <view class="weui-panel__bd">

                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名稱</view>

                        <view class="weui-media-box__desc">編號: 日期: 可採收數量: 單價: </view>

                    </view>

                </navigator>

                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名稱</view>

                        <view class="weui-media-box__desc">編號: 日期: 可採收數量: 單價: </view>

                    </view>

                </navigator>

                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名稱</view>

                        <view class="weui-media-box__desc">編號: 日期: 可採收數量: 單價: </view>

                    </view>

                </navigator>

            <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名稱</view>

                        <view class="weui-media-box__desc">編號: 日期: 可採收數量: 單價: </view>

                    </view>

                </navigator>

            <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">

                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">

                        <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>

                    </view>

                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">

                        <view class="weui-media-box__title">名稱</view>

                        <view class="weui-media-box__desc">編號: 日期: 可採收數量: 單價: </view>

                    </view>

                </navigator>

        </view>

        <view class="weui-panel__ft">

            <view class="weui-cell weui-cell_access weui-cell_link">

            <view class="weui-cell__bd">查看更多</view>

            <view class="weui-cell__ft weui-cell__ft_in-access"></view>

            </view>

        </view>

    </view>

</view>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章