微信小程序 基础组件与导航组件详细介绍


Posted in Javascript onFebruary 21, 2017

微信小程序 基础组件与导航组件详解:

    1.基础组件

       1.1 图标 icon

       1.2 文本 text

       1.3 进度条 progress

    2.导航组件(navigator)

 1.基础组件   

1.1 图标 icon

(1)总结

微信小程序 基础组件与导航组件详细介绍

(2) 案例

    效果截图

微信小程序 基础组件与导航组件详细介绍

    page.wxml

<view class="type-group">
 <block wx:for="{{iconType}}">
  <icon type="{{item}}" size="40"/>
 </block>
</view>

  page.js

//获取应用实例
var app = getApp()
Page({
 data:{
 iconType:[
  'success','success_circle','success_on_circle','waiting','waiting_circle','safe_success','safe_warn','warn','info',
  'info_circle','circle','download','cancel','search','clear'
 ]
 },
})

  1.2 文本 text

(1) 案例

    效果图

微信小程序 基础组件与导航组件详细介绍

    page.wxml

<view class="main">
 <view class="text-view">
  <text class="show-text">{{text}}</text>
 </view>
 <view class="bt-view">
  <button bindtap="addLine" class="show-text">{{add}}</button>
  <button bindtap="removeLine" class="show-text">{{remove}}</button>
 </view> 
</view>

    page.js

//获取应用实例
var app = getApp()
//定义额外的文本内容数组
var extraLine = [];
//初始化文本
var init='Initdata! \n'
Page({
 data:{
 text:init,
 add:'添加',
 remove:'删除'
 },
/*
*添加一行内容
 */
addLine:function(e){
 extraLine.push("This line is new add!")
 this.setData({
  text:init+extraLine.join('\n')
 })
},
/*
*删除一行内容
 */
removeLine:function(e){
 if (extraLine.length > 0) {
  extraLine.pop()
  this.setData({
  text:init + '\n' + extraLine.join('\n')
  })
 }
},
})

    page.wxss

.show-text{
 font-size: 10pt;
 margin-left: 20rpx;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
}
.text-view{
 padding: 10rpx;
}
button{
 margin: 10rpx;
}

 1.3 进度条 progress

(1)总结

 微信小程序 基础组件与导航组件详细介绍

(2)案例

    效果图

   微信小程序 基础组件与导航组件详细介绍

    page.wxml

<view class="progress-view">
 <progress percent="50"/>
 <progress percent="20" stroke-width="10" show-info/>
 <progress percent="40" color="#000"/>
 <progress percent="100" active/>
</view>

    page.wxss

progress{
 margin: 50rpx;
}

 2.导航组件(navigator)

(1) 总结

微信小程序 基础组件与导航组件详细介绍

(2) 案例

    效果图

    微信小程序 基础组件与导航组件详细介绍

     main.wxml

<view class="nav-view">
 <navigator open-type="navigate" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">导航到新页面</navigator>
 <navigator open-type="redirect" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">当前页面</navigator>
 <navigator open-type="switchTab" url="../index/index" class="nav-item" hover-class="nav-hover">切换Tab</navigator>
</view>

    main.wxss

.nav-hover{
 color: white;
 background-color: black;
}
.nav-item{
 margin: 20rpx;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
 padding: 10rpx;
 display: inline-flex;
}

    navigator.wxml

<view class="info">导航到的新页面</view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
微信小程序 UI与容器组件总结
Feb 21 #Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 #Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 #Javascript
微信小程序 支付功能开发错误总结
Feb 21 #Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 #Javascript
jquery实现下拉框左右选择功能
Feb 21 #Javascript
jquery实现页面加载效果
Feb 21 #Javascript
You might like
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
js实现导航跟随效果
2018/11/17 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
详解webpack 最简打包结果分析
2019/02/20 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python实现网页录音效果
2020/10/26 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
七一党日活动总结
2014/07/08 职场文书
电话客服工作职责
2014/07/27 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
碧霞祠导游词
2015/02/09 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python