日常练习微信小程序,及常用的知识点、模版使用的规则及注意事项
特别注意:微信小程序中的hidden属性、display样式实现隐藏属性,下面的代码中也有举例使用。二者都能实现view隐藏。
经过练习例子验证,及查看网上一些大牛的帖子后,自己简单总结如下:
使用display:none控制显隐 并且可由js来动态控制,效果较好,hidden 隐藏布局,虽然隐藏了,但还是会占空间,display:none 隐藏不占据空间。
wx:if与hidden、display的区别:hidden虽然隐藏了视图组件,但组件仍然会渲染;display:none与hidden=true的效果是一样的,display:none仍然会渲染组件,而 wx:if只有在条件变成真的时候才开始局部渲染,如果条件为假,整个view块不是隐藏起来,而是根本没有生成。而hidden、display,只是使view块隐藏,但view块真实存在。
效果 图:效果图续:
wxml代码如下:
<view class="container">
<view class="test">数据绑定-练习</view>
<view>{{mesg}}</view>
<view class="event1" bindtap="event_test1">点击了{{count2}}次</view>
<view class="event2" bindtap="event_test2">点击了{{count1}}次</view>
<!--定义模版,模版不会显示出来,只会显示模版里的内容-->
<view class="test">模版-练习</view>
<template name="demo_template">
<view>姓名:{{name}} 年龄:{{age}}</view>
</template>
<!--使用模版,is表示使用的模版名称,data表示数据的来源,(数据在js里)-->
<!-- <template is="demo_template" data="...zhangshan"></template>中的data引入数据的格式错误-->
<template is="demo_template" data="{{...zhangshan}}"></template>
<template is="demo_template" data="{{...lisi}}"></template>
<!--列表渲染-->
<view class="test">列表渲染-练习</view>
<view wx:for="{{array}}">{{item}}</view>
<!--注意,格式容易出错,记住for后面的写法,item的写法,如何把列表内的元素输出-->
<!--条件渲染,记住条件渲染的格式-->
<view class="test">条件渲染-练习</view>
<view wx:if="{{view_if=='1'}}">杰</view> <!--比较时,判断相等用“==”两个等于-->
<view wx:elif="{{view_if=='2'}}">伟</view><!--在wxml文件中,字符串用单引号括起来,双引号会报错-->
<view wx:else="{{view_if=='3'}}">王激动</view>
<!--条件渲染例2,把条件判断放在block快中,一个条件可以控制多个view显示或都不显示-->
<block wx:if="{{continue=='你'}}">
<view>条件渲染例2</view>
<view class="test2">{{continue+'好,我是机器人!'}}</view>
<!--此处字符串用单引号或双引号都可以,加号表示字符串连接,continue是个字符串变量,在js中定义的-->
<view class="test2">{{continue+"、我、他,大家都快乐!"}}</view>
</block>
<!--view内容显示与否,hidden(true/false)/display:(none/block)-->
<!--两种方法,都可易实现相同的效果,但hidden在赋值时,只能用逻辑值,不能用表达式和逻辑变量-->
<view class="test2" hidden="{{true}}">hidden/display:none练习1</view>
<view class="test2" hidden="{{flag}}">hidden/display:none练习2</view><!-该View无法正常显示-->
<!--flag是逻辑变量,虽然值为true,但还是无法显示-->
<view class="test2" style="display:none">hidden(true/false)/display:(none/block)练习3</view><!-正常隐藏-->
<view class="test2" style="display:block">hidden(true/false)/display:(none/block)练习4</view>
<view class="test2" style="display:{{flag2}}">hidden(true/false)/display:(none/block)练习5</view><!--通过js动态传参控制-->
<view class="test">运算例子-练习</view>
<!--三目运算符-->
<view hidden="{{flag ? true : false}}">三目运算符练习</view><!--hidden不能用这种-->
<view wx:if="{{flag ? true : false}}">三目运算符练习</view>
<!--{{}}双层大括号内可以进行算术运算-->
<view class="test2">双层大括号内可以进行算术运算,如下:</view>
<view class="test2"> {{aa}}+{{bb}}={{aa+bb}}</view>
<view class="test2">双层大括号内可以字符串连接,如下:</view>
<view class="test2">{{continue+'好,我是机器人!'}}</view>
</view>
js代码如下:
var parm={
data : {
mesg : '你好',
count1 : 0,
count2:0,
array:[0,1,2,3,4,'hello'],
/*下面是模版需使用的数据,注意记住格式*/
zhangshan :{ name:'张三', age:'17' },//变量之间有逗号
lisi :{ name: '李四', age:20},
/*条件渲染-条件*/
view_if:"2",//js中字符串用单引号括起来,也可以用双引号括起来
continue:'你',
flag:'true',//在初始化逻辑值时加单引号或双引号,或不加都可以
flag2:'block',
aa:6,
bb:3,
cc:9,
},
/*下面是数据绑定代码*/
event_test1: function (e) { /*event_test1与event_test2效果等价,是两种方法实现数据刷新*/
this.data.count2++;
var count = this.data.count2;
parm.data.count2=count;
this.setData({count2 : count});
console.log(e);
},
event_test2 : function(e){
parm.data.count1=this.data.count1+1;
/*注意下面出错的写法,以后避免出现*/
// this.setData(count);出错
// this.setData({count});出错
//this.setData(parm.data.count);出错
//this.setData(this.data);//不出错,数据没有更新
this.setData(parm.data);
console.log(e);
}
/*下面是模版要用到的数据,需写在data里面*/
/*
zhangshan : {
name:'张三', age :'17'//变量之间有逗号
}
lisi :{
name:'李四',age:20
}
*/
};
Page(parm);
wxss代码如下:
/**index.wxss**/
.event1{
background-color:
lightgreen;
}
.event2{
background-color:
pink;
}
.test{
background-color :
aqua;
color:
red;
font-size:
70
rpx;
}
.test2{
background-color:
blue;
color:
yellow;
font-size:
14px;
}