小程序模板网

微信小程序学习笔记《二》页面跳转,设置滚动条,单页制作,if else ...

发布时间:2018-04-16 10:20 所属栏目:小程序开发教程

作者,山水之间,来自原文地址

 

一:实现页面跳转:

1、//index.wxml
 

				
  1. <navigator url="../news/new">点击我进行跳转</navigator>

2、//app.json

 

				
  1. page:[
  2.  
  3. "pages/index/index,
  4.  
  5. "pages/news/new"
  6.  
  7. ]

//new.wxml

 

				
  1. <text>跳转后的页面</text>

数据绑定:

//wxml

 

				
  1. <text>pages/ceshi/ceshi.wxml</text>
  2. <view>
  3. <loading hidden="{{loadingHidden}}">正在登陆...</loading>
  4. <button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">数据请求</button>
  5. </view>

//js

 

				
  1. Page({
  2. data:{
  3. disabled: false,
  4. loadingHidden: true
  5. },
  6.  
  7. loginBtn: function(event){
  8. this.setData({disabled: true});
  9. this.setData({loadingHidden: false});
  10. }
  11.  
  12. })
 

二:设置滚动条

 

				
  1. <!--垂直滚动,这里必须设置高度-->
  2. <scroll-view scroll-y="true" style="height: 200px">
  3. <view style="background: red; width: 100px; height: 100px" ></view>
  4. <view style="background: green; width: 100px; height: 100px"></view>
  5. <view style="background: blue; width: 100px; height: 100px"></view>
  6. <view style="background: yellow; width: 100px; height: 100px"></view>
  7. </scroll-view>
 

				
  1. <!-- white-space
  2. normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
  3. pre: 保持HTML源代码的空格与换行,等同与pre标签
  4. nowrap: 强制文本在一行,除非遇到br换行标签
  5. pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
  6. pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
  7. inherit: 继承
  8. -->
 

				
  1. <!--水平滚动-->
  2.  
  3. <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
  4. <!-- display: inline-block-->
  5. <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
  6. <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
  7. <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
  8. <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
  9. </scroll-view>
 

三:单页制作

最终效果图 

源码

//index.wxml

 

				
  1. <view class="container">
  2. <view class="header">
  3. <image class="avatar" src="{{userInfo.avatarUrl}}" />
  4. <view class="nickname">{{userInfo.nickName}}</view>
  5. </view>
  6. <view class="section">
  7. <view class="line judgement">绑定账户<text class="tl">深圳XXX酒店</text></view>
  8. <view class="line judgement">业务名称<text class="tl">居家家具</text></view>
  9. <view class="line judgement">会员到期时间<text class="tl">2018-03-09</text></view>
  10. <view class="line judgement">租用类型<text class="tl">日租</text></view>
  11. <view class="line judgement">支付方式<text class="tl">微信/支付宝/现金</text></view>
  12. <view class="line judgement">历史账单</view>
  13. </view>
  14.  
  15.  
  16. </view>

//index.wxss

 

				
  1. .header {
  2. background: #60CA56;
  3. padding: 30rpx;
  4. }
  5. .header .avatar {
  6. display: block;
  7. margin: 0 auto;
  8. width: 160rpx;


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23419.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询