小程序模板網(wǎng)

微信小程序?qū)W習(xí)筆記《二》頁面跳轉(zhuǎn),設(shè)置滾動條,單頁制作,if else ...

發(fā)布時間:2018-04-16 10:20 所屬欄目:小程序開發(fā)教程

作者,山水之間,來自原文地址

 

一:實現(xiàn)頁面跳轉(zhuǎn):

1、//index.wxml
 

				
  1. <navigator url="../news/new">點擊我進行跳轉(zhuǎn)</navigator>

2、//app.json

 

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

//new.wxml

 

				
  1. <text>跳轉(zhuǎn)后的頁面</text>

數(shù)據(jù)綁定:

//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">數(shù)據(jù)請求</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. })
 

二:設(shè)置滾動條

 

				
  1. <!--垂直滾動,這里必須設(shè)置高度-->
  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: 正常無變化(默認(rèn)處理方式.文本自動處理換行.假如抵達容器邊界內(nèi)容會轉(zhuǎn)到下一行)
  3. pre: 保持HTML源代碼的空格與換行,等同與pre標(biāo)簽
  4. nowrap: 強制文本在一行,除非遇到br換行標(biāo)簽
  5. pre-wrap: 同pre屬性,但是遇到超出容器范圍的時候會自動換行
  6. pre-line: 同pre屬性,但是遇到連續(xù)空格會被看作一個空格
  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">業(yè)務(wù)名稱<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">微信/支付寶/現(xiàn)金</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;


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23419.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢