作者,山水之間,來(lái)自原文地址
一:實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn):
1、//index.wxml
-
<navigator url="../news/new">點(diǎn)擊我進(jìn)行跳轉(zhuǎn)</navigator>
2、//app.json
-
page:[
-
-
"pages/index/index,
-
-
"pages/news/new"
-
-
]
//new.wxml
-
<text>跳轉(zhuǎn)后的頁(yè)面</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ù)請(qǐng)求</button>
-
</view>
//js
-
Page({
-
data:{
-
disabled: false,
-
loadingHidden: true
-
},
-
-
loginBtn: function(event){
-
this.setData({disabled: true});
-
this.setData({loadingHidden: false});
-
}
-
-
})
二:設(shè)置滾動(dòng)條
-
<!--垂直滾動(dòng),這里必須設(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: 正常無(wú)變化(默認(rèn)處理方式.文本自動(dòng)處理?yè)Q行.假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行)
-
pre: 保持HTML源代碼的空格與換行,等同與pre標(biāo)簽
-
nowrap: 強(qiáng)制文本在一行,除非遇到br換行標(biāo)簽
-
pre-wrap: 同pre屬性,但是遇到超出容器范圍的時(shí)候會(huì)自動(dòng)換行
-
pre-line: 同pre屬性,但是遇到連續(xù)空格會(huì)被看作一個(gè)空格
-
inherit: 繼承
-
-->
-
<!--水平滾動(dòng)-->
-
-
<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>
三:?jiǎn)雾?yè)制作
最終效果圖
源碼
//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">會(huì)員到期時(shí)間<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;
|