微信小程序笔记3

2019/04/17

1.数据绑定

简单的数据绑定
在weekly.js文件中写入

Page({

  /**
   * 页面的初始数据
   */
  data: {
    thisWeekMovie:{
      name:"A Star Is Born",
      comment:"SUGA's 推荐，绝对完美",
      imagePath:"/images/star.jpg"
    },
    count:123,
    score:9.9,
  },

再在weekly.wxml中写

 <text>浏览次数：{{count}}</text>
 <text>评分：{{score}} {{(score>=6.0)?"优":"差"}}</text>

成品：

总体绑定
weekly.js文件中

Page({

  /**
   * 页面的初始数据
   */
  data: {
    thisWeekMovie:{
      name:"A Star Is Born",
      comment:"SUGA's 推荐，绝对完美",
      imagePath:"/images/star.jpg"
    },
    score:9.9,
  },

weekly.wxml中

<!-- weekly.wxml -->
<view class='main'>
  <text>本周推荐</text>
  <image src='{{thisWeekMovie.imagePath}}'></image>
  <text>{{thisWeekMovie.name}}</text>
  <text>点评：{{thisWeekMovie.comment}}</text>
  <text>评分：{{score}} {{(score>=6.0)?"优":"差"}}</text>
</view>

成品结果：

可以在APPdata中直接修改数据:

2.条件渲染

使用wx:if
weekly.js文件中

weekly.wxml文件中：

isHighlyRecommended:true

isHighlyRecommended:false

条件渲染与hidden属性的区别
weekly.js文件中

weekly.wxml文件中

isHighlyRecommended:true

isHighlyRecommended:false

可见性需要频繁切换时，建议不使用条件渲染，使用hidden渲染

3.列表渲染

重复的渲染生成组件
wx:for

实例：
weekly.js文件

data: {
    weeklyMovieList:[
      {
      name:"A Star Is Born",
      comment:"SUGA's 推荐，绝对完美",
      imagePath:"/images/star.jpg",
      isHighlyRecommended:false
      },
      {
        name: "泰坦尼克号",
        comment: "JIMIN and JIN's 推荐，绝对完美",
        imagePath: "/images/tai.jpg",
        isHighlyRecommended: true
      },
      {
        name: "复仇者联盟",
        comment: "RM's 推荐，绝对完美",
        imagePath: "/images/fu.jpg",
        isHighlyRecommended: false
      }
    ],
  },

weekly.xwml文件

<!-- weekly.wxml -->
<view class=''>
  <view class='movie' wx:for='{{weeklyMovieList}}'>
  <image class='movie-image' src='{{item.imagePath}}'></image>
  <view class='movie-details'>
  <text>第{{index+1}}周:{{item.name}}</text>
  <text>点评：{{item.comment}}</text>
  <text wx:if='{{item.isHighlyRecommended}}' style='font-size:16px;color:red;'>强烈推荐</text>
  </view>
  </view>
</view>

weekly.wxss文件

image{
  width: 80px;
  height: 120px;
}
.movie{
  display: flex;
}
.movie-details{
  display:flex;
  flex-direction: column;
  width: 550rpx;
}

结果