微信小程序設計weui框架
阿新 • • 發佈:2017-10-19
src lin git rip eight idt undefined title 不能
weui-wxss是微信官方提供的ui框架,用起來也很方便(copy)。
下載地址:https://github.com/weui/weui-wxss
第一步:需要把下載的內容copy到項目中,主要是dist目錄下的style目錄下的weui.wxss文件。
第二步:在全局的app.wxss文件中引用 , 註意目錄是相對路徑
@import "style/weui.wxss";
第三步:加class樣式
class="page"> class="page__bd"> name="msgTemp"> class="weui-panel__bd"> url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> class="weui-media-box__hd weui-media-box__hd_in-appmsg"> class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/> class="weui-media-box__bd weui-media-box__bd_in-appmsg"> class="weui-media-box__title">{{title}} class="weui-media-box__desc">{{time}} class="weui-panel weui-panel_access"> class="weui-panel__hd">文章列表 wx:for-items="{{msgList}}" wx:key="{{item.id}}"> class="kind-list__item"> is="msgTemp" data="{{...item}}"/> class="weui-panel__ft"> class="weui-cell weui-cell_access weui-cell_link"> class="weui-cell__bd">查看更多 class="weui-cell__ft weui-cell__ft_in-access"> class="page__ft">
這個步驟很關鍵,怎麽找到合適的文檔呢?weui-wxss是沒有文檔的,但是它有例子。在下載的內容中,dist目錄下的example目錄下全部都是例子。我們需要做的是將dist目錄導入IDE中,然後找到合適的UI。
如圖所示,找到合適的頁面,然後通過紅色框的路徑找到對應的wxml文件,把需要的部分copy出來,再結合自己的要求修改。文章列表效果圖:
註意點:
1.copy出來的代碼,勢必會打亂原來代碼的結構,這時不能心急,慢慢修改。畢竟這些class的命名是比較長的。
文章作者:0127的救贖
版權說明:本文轉載於小程序社區(wxapp-union.com)有問題請聯系我們。
微信小程序設計weui框架