微信小程序学习笔记《二》页面跳转,设置滚动条,单页制作,if else ...
发布:2018-04-16 10:20浏览:
次来源:网络 作者:cola
作者,山水之间,来自原文地址
一:实现页面跳转:
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="{{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;
-
margin: 0 auto;
-
width: 160rpx;
|
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。