学习-微信小程序-数据绑定-条件渲染-列表渲染-模版template定义及使用-view的hidden、display的属性

最新推荐文章于 2025-10-30 22:28:59 发布

原创最新推荐文章于 2025-10-30 22:28:59 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍微信小程序开发中的关键知识点，包括数据绑定、事件处理、模板使用、列表与条件渲染等核心功能，并通过具体实例展示了hidden与display属性在视图隐藏控制上的区别。

日常练习微信小程序，及常用的知识点、模版使用的规则及注意事项

特别注意：微信小程序中的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: 70rpx;
}
.test2{
  background-color: blue;
  color:yellow;
  font-size: 14px;
}