作者,山水之間,來自原文地址
一:實現(xiàn)頁面跳轉(zhuǎn):
1、//index.wxml
-
<navigator url="../news/new">點擊我進行跳轉(zhuǎn)</navigator>
2、//app.json
-
page:[
-
-
"pages/index/index,
-
-
"pages/news/new"
-
-
]
//new.wxml
-
<text>跳轉(zhuǎn)后的頁面</text>
數(shù)據(jù)綁定:
//wxml
-
<text>pages/ceshi/ceshi.wxml</text>
-
<view>
-
<loading hidden="{{loadingHidden}}">正在登陸...</loading>
-
<button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">數(shù)據(jù)請求</button>
-
</view>
//js
-
Page({
-
data:{
-
disabled: false,
-
loadingHidden: true
-
},
-
-
loginBtn: function(event){
-
this.setData({disabled: true});
-
this.setData({loadingHidden: false});
-
}
-
-
})
二:設(shè)置滾動條
-
<!--垂直滾動,這里必須設(shè)置高度-->
-
<scroll-view scroll-y="true" style="height: 200px">
-
<view style="background: red; width: 100px; height: 100px" ></view>
-
<view style="background: green; width: 100px; height: 100px"></view>
-
<view style="background: blue; width: 100px; height: 100px"></view>
-
<view style="background: yellow; width: 100px; height: 100px"></view>
-
</scroll-view>
-
<!-- white-space
-
normal: 正常無變化(默認(rèn)處理方式.文本自動處理換行.假如抵達容器邊界內(nèi)容會轉(zhuǎn)到下一行)
-
pre: 保持HTML源代碼的空格與換行,等同與pre標(biāo)簽
-
nowrap: 強制文本在一行,除非遇到br換行標(biāo)簽
-
pre-wrap: 同pre屬性,但是遇到超出容器范圍的時候會自動換行
-
pre-line: 同pre屬性,但是遇到連續(xù)空格會被看作一個空格
-
inherit: 繼承
-
-->
-
<!--水平滾動-->
-
-
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
-
<!-- display: inline-block-->
-
<view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
-
<view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
-
<view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
-
<view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
-
</scroll-view>
三:單頁制作
最終效果圖
源碼
//index.wxml
-
<view class="container">
-
<view class="header">
-
<image class="avatar" src="{{userInfo.avatarUrl}}" />
-
<view class="nickname">{{userInfo.nickName}}</view>
-
</view>
-
<view class="section">
-
<view class="line judgement">綁定賬戶<text class="tl">深圳XXX酒店</text></view>
-
<view class="line judgement">業(yè)務(wù)名稱<text class="tl">居家家具</text></view>
-
<view class="line judgement">會員到期時間<text class="tl">2018-03-09</text></view>
-
<view class="line judgement">租用類型<text class="tl">日租</text></view>
-
<view class="line judgement">支付方式<text class="tl">微信/支付寶/現(xiàn)金</text></view>
-
<view class="line judgement">歷史賬單</view>
-
</view>
-
-
-
</view>
//index.wxss
-
.header {
-
background: #60CA56;
-
padding: 30rpx;
-
}
-
.header .avatar {
-
display: block;
-
margin: 0 auto;
-
width: 160rpx;
|