一:实现页面跳转: 1、//index.wxml
<navigator url="../news/new">点击我进行跳转</navigator>
2、//app.json
page:[
"pages/index/index,
"pages/news/new"
]
//new.wxml
<text>跳转后的页面</text>
数据绑定:
//wxml
<text>pages/ceshi/ceshi.wxml</text>
<view>
<loading hidden="{{loadingHidden}}">正在登陆...</loading>
<button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">数据请求</button>
</view>
//js
Page({
data:{
disabled: false,
loadingHidden: true
},
loginBtn: function(event){
this.setData({disabled: true});
this.setData({loadingHidden: false});
}
})
二:设置滚动条
<!--垂直滚动,这里必须设置高度-->
<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: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre: 保持HTML源代码的空格与换行,等同与pre标签
nowrap: 强制文本在一行,除非遇到br换行标签
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
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=http://www.yiyongtong.com/archives/"{{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">业务名称<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">微信/支付宝/现金</text></view>
<view class="line judgement">历史账单</view>
</view>
</view>
//index.wxss
.header {
background: #60CA56;
padding: 30rpx;
}
.header .avatar {
display: block;