微信小程序-UI控件的使用(3)
2017-01-12 12:31
489 查看
1、条件语句控制控件的隐藏/显示
ifandelse.wxml
ifandelse.js
2、for循环九九乘法表
list.wxml
3、switch 组件操作
list.wxml
list.js
效果图:
4、模块的导入:
common.js
引入:
调用:
ifandelse.wxml
<view wx:if="{{length>5}}">1</view> <view wx:elif="{{length>2}}">2</view> <view wx:else>3</view
ifandelse.js
Page({ data:{ length:4 }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })
2、for循环九九乘法表
list.wxml
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view>
3、switch 组件操作
list.wxml
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch> <button bindtap="switch"> Switch </button> <button bindtap="addToFront"> Add to the front </button> <switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch> <button bindtap="addNumberToFront"> Add to the front </button>
list.js
Page({ data: { items:[{ message:'foo', },{ message:'bar', }], objectArray: [ {id: 5, unique: 'unique_5'}, {id: 4, unique: 'unique_4'}, {id: 3, unique: 'unique_3'}, {id: 2, unique: 'unique_2'}, {id: 1, unique: 'unique_1'}, {id: 0, unique: 'unique_0'}, ], numberArray: [1, 2, 3, 4] }, switch: function(e) { const length = this.data.objectArray.length for (let i = 0; i < length; ++i) { const x = Math.floor(Math.random() * length) const y = Math.floor(Math.random() * length) const temp = this.data.objectArray[x] this.data.objectArray[x] = this.data.objectArray[y] this.data.objectArray[y] = temp } this.setData({ objectArray: this.data.objectArray }) }, addToFront: function(e) { const length = this.data.objectArray.length this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray) this.setData({ objectArray: this.data.objectArray }) }, addNumberToFront: function(e){ this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray) this.setData({ numberArray: this.data.numberArray }) } })
效果图:
4、模块的导入:
common.js
function sayHello(name){ console.log('Hello,'+name+'!') } module.exports = { sayHello : sayHello }
引入:
var common = require('../../utils/common.js') Page({ syHello:function(){ common.sayHello('meta') } })
调用:
this.syHello()
相关文章推荐
- 微信小程序-UI控件的使用(4)
- 微信小程序-UI控件的使用(1)
- 微信小程序-UI控件的使用(6)
- 微信小程序-UI控件的使用(5)
- 微信小程序-UI控件的使用(2)
- 【微信小程序】微信小程序中WeUI的使用
- 微信小程序video控件的使用
- 微信小程序中使用scroll-view控件实现上拉加载更多遇到的坑
- 浅谈微信小程序之官方UI框架we-ui使用教程
- 微信小程序之使用weui.wxss(八)
- 详细介绍微信小程序使用WEB-VIEW控件进行微信支付
- 微信小程序之官方UI框架we-ui 使用教程
- 1、微信小程序学习:基本控件的使用
- 使用ASP.NET AJAX Control Toolkit中的NoBot控件拒绝垃圾发布程序
- 在使用浏览器控件的程序中判断HTTP错误
- 使用ControlToolkit中的NoBot控件拒绝垃圾发布程序
- 在.net窗体程序中使用用户控件
- 使用ASP.NET AJAX Control Toolkit中的NoBot控件拒绝垃圾发布程序 【转载】
- 使用wmp控件连续播放多个声音文件的代码(计算机报时程序C#)
- TabCtrl控件的使用一则——程序架构