用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:36

作者,山水之间,来自原文地址一:实现页面跳转:1、//index.wxml 点击我进行跳转 2、//app.json page://new.wxml 跳转后的页面数据绑定://wxml pages/ceshi/ceshi.wxml 正在登陆... 数据 ...

作者,山水之间,来自

原文地址

一:实现页面跳转:

1、//index.wxml
  1. url="../news/new">点击我进行跳转

2、//app.json

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

//new.wxml

  1. 跳转后的页面

数据绑定:

//wxml

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

//js

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

二:设置滚动条

  1. scroll-y="true" style="height: 200px">
  2. style="background: red; width: 100px; height: 100px" >
  3. style="background: green; width: 100px; height: 100px">
  4. style="background: blue; width: 100px; height: 100px">
  5. style="background: yellow; width: 100px; height: 100px">
  1. scroll-x="true" style=" white-space: nowrap; display: flex" >
  2. style="background: red; width: 200px; height: 100px; display: inline-block" >
  3. style="background: green; width: 200px; height: 100px; display: inline-block">
  4. style="background: blue; width: 200px; height: 100px; display: inline-block">
  5. style="background: yellow; width: 200px; height: 100px; display: inline-block">

三:单页制作

最终效果图

源码

//index.wxml

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

//index.wxss

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏