微信小程式簡單常見首頁demo
wxml
<view class='index-contier'>
<view class="index-left">
<view>電池剩餘</view>
<view>62%</view>
</view>
<view class="index-center">
<view class="logo">頭像</view>
<view>小豬快跑</view>
</view >
<view class="index-right">
<view>繫結手環</view>
<view>62%</view>
</view>
</view>
<view class='inform'>
<view class='phone'>
<span>手機</span>
<span>123456788</span>
</view>
<view class='name'>
<span>姓名</span>
<span>王婷</span>
</view>
<view class='sex'>
<span>性別</span>
<span>女</span>
</view>
<view class='age'>
<span>年齡</span>
<span >13</span>
</view>
<view class='manger'>
<span>部門</span>
<span>軟體部門</span>
</view>
</view>
wxss
.index-contier {
color: #ffffff;
font-size: 12px;
width: 100%;
height: 150px;
background: linear-gradient(#e0f1f7, #0a99c9);
}
.index-left {
float: left;
width: 30%;
text-align: center;
margin-top: 92px;
}
.index-center {
float: left;
width: 40%;
text-align: center;
margin-top: 30px;
}
.logo {
margin: 0 auto;
width: 80px;
height: 80px;
background: #ffffff;
border: 1px solid #0a99c9;
border-radius: 40px;
}
.index-right {
float: left;
width: 30%;
text-align: center;
margin-top: 92px;
}
.inform {
padding: 0 6px;
font-size: 12px;
}
.phone {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.phone span {
margin: 0 10px;
}
.phone span:nth-child(2) {
float: right;
}
.name {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.name span {
margin: 0 10px;
}
.name span:nth-child(2) {
float: right;
}
.sex {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.sex span {
margin: 0 10px;
}
.sex span:nth-child(2) {
float: right;
}
.age {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.age span {
margin: 0 10px;
}
.age span:nth-child(2) {
float: right;
}
.manger {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #e6e5e2;
}
.manger span {
margin: 0 10px;
}
.manger span:nth-child(2) {
float: right;
}
相關推薦
微信小程式簡單常見首頁demo
wxml<view class='index-contier'> <view class="index-left"> <view>電池剩餘</view> <view>62%</view> &
微信小程式onLaunch非同步,首頁onLoad先執行?
本來按照事件順序,小程式初始化時觸發App裡的onLaunch,後面再執行頁面Page裡的onLoad,但是在onLaunch裡請求獲取是否有許可權,等待返回值的時候Page裡的onLoad事件就已經執行了。 //app.js App({ onLaunch: function ()
微信小程式 簡單獲取螢幕視口高度
由於小程式的寬度是固定的 750rpx,我們可以先用 wx.getSystemInfo 來獲取可使用視窗的寬高(並非rpx),結合750rpx的寬度算出比例,再用比例來算出高度 let that = this; wx.getSystemInfo({ success: function (re
微信小程式——簡單的介面設定
微信小程式開發準備 第一步:申請小程式賬號(微信公眾平臺) 第二步:下載微信開發者工具(微信公眾平臺點選文件、小程式開發、下載) 開發語言 javascript、html等 基本語法: 1.view標籤相當於div:
微信小程式生成詳情內容頁 Thinkphp後臺呼叫資料庫
列表頁連結加上產品ID,如下: <navigator url="../goods/goods?goods_id={{item.goods_id}}" ></navigator&g
微信小程式--簡單頁面跳轉
微信小程式--簡單頁面跳轉 例如:點選一個text ,跳轉入一個新的頁面blueberry.wxml 首先對text 設定監聽事件 <view bindtap="toast" cla
微信小程式簡單的登入頁面的跳轉
首先設定tapbar 在APP.js裡面設定相關資料 使用者的資訊; loginBtnClick:function(){ app.globalData.userInfo={usern
微信小程式 返回上一頁並傳參
itemClick: function(e) { let pages = getCurrentPages(); let prevPage = pages
微信小程式返回上一頁資料自動更新
需求 For example,首頁有一篇文章,點選進入文章詳情頁,首頁和詳情頁都有收藏功能,如何在詳情頁收藏成功之後,首頁的收藏狀態可以 無重新整理修改? getCurrentPages() getCurrentPages()函式用於獲取當前頁面棧的例項,
微信小程式簡單的form表單本地儲存資料
效果圖:主要利用小程式的getStorage來實現非同步本地儲存。小程式目錄結構如下:新建專案前,為了簡化操作可直接右鍵新建目錄,這樣建出來的檔案會直接寫在app.json中,無需手動新增。login.
微信小程式開發常見問題FAQ之八
微信小程式遇到問題怎麼辦?遇到微信小程式方面的問題,該去哪裡提問呢?一起來看看第九程式為您整理的微信開發者社群開發常見問題FAQ吧~在文中,您可使用「CTRL+F」,輸入關鍵詞來快速找尋您需要的答案。 Q:該小程式未做使用者釋出內容的關鍵詞過濾,可以隨意釋出違反國家法律法
微信小程式返回上一頁 快取資料的寫入,讀取以及移除
頁面回退在小程式的頁面操作中也經常用得到,方法還是很簡單的,直接用wx.navigateBack即可返回之前瀏覽過的頁面,而delta則是返回到之前的哪一頁。1表示上一頁,2表示上上一頁,以此類推。如果數字超過瀏覽過的頁面數則直接回到首頁。回退的時候一般都有資料傳輸,則可以在
微信小程式開發常見問題
1.新建頁面編譯錯誤,提示無法找到對應wxml檔案? ---------新建時會在配置檔案自動生成,但是通常會在最前面加“/”,把“/”去除就可,這算是工具bug嗎。 2.tabbar底部選單不顯示? ----------保持配置檔案第一個頁面和選單列表中第一個路徑相同才
微信小程式----返回上一頁重新整理或當前頁重新整理
宣告 bug: 在onShow中執行this.onLoad(),會導致頁面第一次載入的時候陣列載入兩次! 造成原因:頁面載入先執行onLoad,再執行的onShow,就會出現在onLoad載入一次資
微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法
微信小程式開發中列表頁載入下一頁以及下拉重新整理 實現方法,微信列表頁常用功能有下拉重新整理,上劃載入更多,怎麼實現呢? 直接上程式碼吧: 列表頁js global.p = 1 var url = getApp().globalData.API_URL +'/a
微信小程式ajax請求分頁載入資料
分頁載入功能大家遇到的應該會經常遇到,應用場景也很多,例如微博,QQ,微信朋友圈以及新聞類應用,都會有分頁載入的功能,這不僅節省了我們使用者的流量,還提升了使用者體驗。那麼今天的這篇文章就是介紹微信小程式中如何實現分頁載入的功能。照例先上原始碼及效果圖。原始碼傳送門要實現這樣的功能,一般需要在請求資料時加入當
微信小程式-外賣選購頁實現切換分類與數量加減
關於微信小程式外賣介面實現選購切換分類與數量加減功能開發步驟: 效果圖 實現以下功能 一、 點選分類項,切換右邊的食品,並高亮自身 這個實現比較簡單,給一個states陣列,用於記錄每一項分類的狀態,點選設為true,wxml渲染時三目運算判斷即可。 category
微信小程式開發常見問題FAQ之五
微信小程式遇到問題怎麼辦?遇到微信小程式方面的問題,該去哪裡提問呢?一起來看看第九程式為您整理的微信開發者社群開發常見問題FAQ吧~在文中,您可使用「CTRL+F」,輸入關鍵詞來快速找尋您需要的答案。 Q:就算引入了es6-promise ios9 ios8 也無法使用P
微信小程式簡單介紹
專案檔案簡單介紹 每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成,如:index.js、index.wxml、index.wxss、index.json。.js字尾的檔案是指令碼檔案,.js
【程式碼】微信小程式 簡單一個頁面,網上圖片展示
//wxss/* 基礎樣式 */ view,scroll-view,swiper,swiper-item,icon,text,progress,button,checkbox-group,checkbox,form,input,label,picker,radio-group