午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

微信小程序學習筆記《二》頁面跳轉，設置滾動條，單頁制作，if else ...

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

	
		

			
				

					作者，山水之間,來自原文(wen)地址(zhi)

				

					 

				

					一：實現頁面跳轉:

				
1、//index.wxml


				

					 

				

				
    
					
  1. 
						<navigator url="../news/new">點擊我進行跳轉</navigator>
    2. 
				

				

					2、//app.json

				

					 

				

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

				

					//new.wxml

				

					 

				

				
    
					
  1. 
						<text>跳轉后的頁面</text>
    2. 
				

				

					數(shu)據綁定(ding)：

				

					//wxml

				

					 

				

				
    
					
  1. 
						<text>pages/ceshi/ceshi.wxml</text>
    2. 
					
  2. 
						<view>
    3. 
					
  3. 
						<loading hidden="{{loadingHidden}}">正在登陸...</loading>
    4. 
					
  4. 
						<button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">數據請求</button>
    5. 
					
  5. 
						</view>
    6. 
				

				

					//js

				

					 

				

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

				

					 

				

					二：設置滾動條

				

					 

				

				
    
					
  1. 
						<!--垂直滾動，這里必須設置高度-->
    2. 
					
  2. 
						<scroll-view scroll-y="true" style="height: 200px">
    3. 
					
  3. 
						<view style="background: red; width: 100px; height: 100px" ></view>
    4. 
					
  4. 
						<view style="background: green; width: 100px; height: 100px"></view>
    5. 
					
  5. 
						<view style="background: blue; width: 100px; height: 100px"></view>
    6. 
					
  6. 
						<view style="background: yellow; width: 100px; height: 100px"></view>
    7. 
					
  7. 
						</scroll-view>
    8. 
				

				

					 

				

				
    
					
  1. 
						<!-- white-space
    2. 
					
  2. 
						normal: 正常無變化(默認處理方式.文本自動處理換行.假如抵達容器邊界內容會轉到下一行)
    3. 
					
  3. 
						pre: 保持HTML源代碼的空格與換行,等同與pre標簽
    4. 
					
  4. 
						nowrap: 強制文本在一行,除非遇到br換行標簽
    5. 
					
  5. 
						pre-wrap: 同pre屬性,但是遇到超出容器范圍的時候會自動換行
    6. 
					
  6. 
						pre-line: 同pre屬性,但是遇到連續空格會被看作一個空格
    7. 
					
  7. 
						inherit: 繼承
    8. 
					
  8. 
						-->
    9. 
				

				

					 

				

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

				

					 

				

					三：單頁制作

				

					最終(zhong)效果圖 

				

					
                
                

                    本文地址：//www.jinyoudianli.com/wxmini/doc/course/23419.html 復制鏈接 
                    如需定制請聯系易(yi)優客服咨詢： 
                

            
          
          

        
      
      
    
  





  

    

            
            
            
            
            
   
        
工作日 8:30-12:00 14:30-18:00 

          周(zhou)六及部分節假日(ri)提(ti)供值班(ban)服(fu)務

         

    

  









  
  

    
    
    

      
    

    
  






 



    

        
            易小優
            
        
        

                        轉人工
                        ×