微信小程序-学习笔记6-组件

 

基础内容组件:icon、text、progress


  
  
  
  
  {{text}}
   
    
  



progress{
  width:100%;
  margin:10px 0 10px 0;
}



  data: {
    text:"这是文字内容。。\n第二行",
    icons:[
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ]
  },

 

表单组件:

button、checkbox、input、label、picker、radio、slider、switch、form

微信小程序-学习笔记6-组件_第1张图片

 

微信小程序-学习笔记6-组件_第2张图片

 

微信小程序-学习笔记6-组件_第3张图片

 

微信小程序-学习笔记6-组件_第4张图片

 

操作反馈小工具:action-sheet、modal、toast、loading

action-sheet:

微信小程序-学习笔记6-组件_第5张图片

 

微信小程序-学习笔记6-组件_第6张图片

 

微信小程序-学习笔记6-组件_第7张图片

 

 

modal:弹出框

微信小程序-学习笔记6-组件_第8张图片

 

微信小程序-学习笔记6-组件_第9张图片

 

微信小程序-学习笔记6-组件_第10张图片

 

微信小程序-学习笔记6-组件_第11张图片

 

toast:消息提示框

微信小程序-学习笔记6-组件_第12张图片

 

 

微信小程序-学习笔记6-组件_第13张图片

 

Loading:

微信小程序-学习笔记6-组件_第14张图片

 

微信小程序-学习笔记6-组件_第15张图片

 

微信小程序-学习笔记6-组件_第16张图片

 

微信小程序-学习笔记6-组件_第17张图片

 

微信小程序导航:navigator

页面跳转1:

微信小程序-学习笔记6-组件_第18张图片

 

微信小程序-学习笔记6-组件_第19张图片

 

页面跳转2:组件navigator实现

 

 

微信小程序-学习笔记6-组件_第20张图片

 

 

ps:来源于微信小程序开发文档及极客学院视频学习

 

转载于:https://www.cnblogs.com/haimengqingyuan/p/8360183.html

你可能感兴趣的:(微信小程序-学习笔记6-组件)