电影周周看V2

最新推荐文章于 2021-09-03 12:08:20 发布

被自己蠢哭

最新推荐文章于 2021-09-03 12:08:20 发布

阅读量829

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_42135145/article/details/89196017

版权

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

4 篇文章 0 订阅

订阅专栏

1.数据绑定

2.小程序运行环境与基本架构

3.条件渲染（wx:if）

4.列表渲染（wx:for）

5.使用swiper组件

6.页面的生命周期函数

7.更新数据

8.事件机制

-----------------------------------------------------------------------------------------------------------------------------------------------------

1.数据绑定

（类似结构体）

weekly.js:

Page({
  data:{
    thisWeekMovie:{
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/Image/jf.jpg"
    },
    count:123,
    score:58
  }
})

weekly.wxml:（修改部分代码）

<view class='container'>
<!-- container 在 index.wxss中定义 则该部分该功能不可用，放入app.wxss中定义，则为全局定义，该功能可用-->
  <text>本周推荐</text>
  <image class='about-banner' src="/Images/jf.jpg"></image>
  <text>{{thisWeekMovie.name}}</text>
  <text>点评：{{thisWeekMovie.comment}}</text>
  <text>{{(score>=60)?"及格":"不及格"}}</text>
</view>

效果图：

2.小程序运行环境与基本架构

视图层（渲染层）和逻辑层

3.条件渲染

（if语句）

1)wx:if属性的使用

2)wx:if VS hidden

weekly.js

Page({
  data:{
    thisWeekMovie:{
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/Images/jf.jpg",
      isHighlyRecommended:true
    },
    count:123,
    score:58
  }
})

weekly.wxml（在<view></view>中添加）

<!-- 使用条件渲染 -->
  <!-- <text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text> -->
  <!-- 使用hidden属性 -->
  <text hidden="{{!thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text>

4.列表渲染
（循环语句）重复的渲染生成组件

wx:for

weekly.js（添加图片）

Page({
  data:{
    WeeklyMovieList:[
    {
      name:"泰坦尼克号",
      comment:"失去的才是永恒的。",
      imagePath:"/Images/ttnkh.jpg",
      isHighlyRecommended:false
    },
    {
      name:"这个杀手不太冷",
      comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事。",
      imagePath:"/Images/zgssbtl.jpg",
      isHighlyRecommended:false
    },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/Images/jf.jpg",
      isHighlyRecommended:true
    },
    ],
    count:123,
    score:58
  }
})

weekly.wxml

<view class=''>
<!-- container 在 index.wxss中定义 则该部分该功能不可用，放入app.wxss中定义，则为全局定义，该功能可用-->

  <!-- <image class='about-banner' src="/Images/jf.jpg"></image>
  <text>{{thisWeekMovie.name}}</text>
  <text>点评：{{thisWeekMovie.comment}}</text>
  <text>{{(score>=60)?"及格":"不及格"}}</text>
  <!-- 使用条件渲染 -->
  <!-- <text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text> -->
  <!-- 使用hidden属性 -->
  <!-- <text hidden="{{!thisWeekMovie.isHighlyRecommended}}" style='font-size:16px; color:red;'>强烈推荐</text>  -->



  <!-- 更改样式 -->

  <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

.movie{
  display: flex;
}

.movie-details{
  display: flex;
  flex-direction: column;
  width:550rpx;
}

.movie-image{
  width: 200rpx;
  height: 200rpx;
}

效果图：

附：item为for内循环元素,index为数组序号

5.使用swiper组件

使用swiper组件，将列表展示转为幻灯片轮播展示

swiper元素默认高度是150像素高，image元素默认生成的高度是240像素高

weekly.wxml

<!-- 更改样式 -->
  <swiper class='movie-swiper' indicator-dots='{{true}}' previous-margin='50rpx' next-margin='50rpx'> 
  <!-- previous-margin='50rpx' next-margin='50rpx'为前、后一页漏出的宽度 -->
  <!-- indicator-dots='{{true}}' 面板指示 -->
    <swiper-item class='movie' wx:for="{{WeeklyMovieList}}">
      <view class='container1 movie-card'>
        <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>
    </swiper-item>
  </swiper>

weekly.wxss（添加代码）

.movie-swiper{
  /* 设为页面适口高度的90% */
  height: 90vh;
}

.movie-card{
  height: 100%;
  width: 100%;
  background-color: #eee;
  /* 两个相邻幻灯片间隔10像素 */
  margin: 0 20rpx;
}

附，我在app.wxss中添加（如下样式）

.container1 {
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between;  */
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
}

效果图：（三张图）

6.页面的生命周期函数

weekly.wxml（修改了swiper部分代码）

 <!-- 更改样式 -->
  <swiper class='movie-swiper' indicator-dots='{{true}}' previous-margin='50rpx' next-margin='50rpx' current='{{currentIndex}}'>  
  <!-- current='1' 其值为最开始显示的页(1) -->
  <!-- previous-margin='50rpx' next-margin='50rpx'为前、后一页漏出的宽度 -->
  <!-- indicator-dots='{{true}}' 面板指示 -->
    <swiper-item class='movie' wx:for="{{WeeklyMovieList}}">
      <view class='container1 movie-card'>
        <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> -->
        <!-- bindtap='f0' 定义事件处理函数f0 -->
        <text bindtap='f0' wx:if="{{index<(WeeklyMovieList.length-1)}}" class='return-button'>返回本周</text>
      </view>
    </swiper-item>
  </swiper>

weekly.js（在WeeklyMovieList中添加代码）

Page({
  data:{
    WeeklyMovieList:[
    {
      name:"泰坦尼克号",
      comment:"失去的才是永恒的。",
      imagePath:"/Images/ttnkh.jpg",
      isHighlyRecommended:false
    },
    {
      name:"这个杀手不太冷",
      comment:"小萝莉与怪蜀黍纯真灿烂的爱情故事。",
      imagePath:"/Images/zgssbtl.jpg",
      isHighlyRecommended:false
    },
    {
      name:"教父",
      comment:"最精彩的剧本，最真实的黑帮电影。",
      imagePath:"/Images/jf.jpg",
      isHighlyRecommended:true
    },
    ],
    count:123,
    score:58,
    // 添加内部状态变量
    currentIndex: 0
  },
  // onLoad的生命周期回调函数
  onLoad:function(options){
    this.setData({
      currentIndex:this.data.WeeklyMovieList.length - 1
    })
  },
  onShow:function(){

  },
  onReady:function(){

  },
  onHide:function(){

  },
  onUnload:function(){
    
  }
})

结果显示：（直接跳转至最后一页，且除最后一页外都有“返回本周”）

7.更新数据

小程序并没有提供类似于DOM的API，来让逻辑层的JavaScript对视图层进行直接更新。只能是首先在视图层建立数据绑定，然后在逻辑层的JavaScript中，通过对视图层所绑定的内部状态数据的更新，来间接的对视图层进行更新。

对视图层进行更新的时候，必须使用this.setData方法调用

weekly.wxml（在最外层<view></view>中添加代码）

<text>{{count}}</text>
<button bindtap='f0'>+1</button>

weekly.js

 // onLoad的生命周期回调函数
  onLoad:function(options){
    this.setData({
      currentIndex:this.data.WeeklyMovieList.length - 1
    })
  },

  f0:function(event){
    this.setData({
      count:this.data.count+1,
      // 更改第三个的名字，对局部的更新
      "WeeklyMovieList[2].name":"教父3"
    })
  }

效果图：

小程序视图层相应的更新，并不会自动的引起内部数据的变化。视图层对内部状态数据是单向绑定。

8.事件机制

响应用户交互（视图层向逻辑层进行数据通信的一种方式）

catchtap：绑定事件处理函数，会阻止自己触发这个tap事件向上冒泡传递。不会向上冒泡传递。eg:不会触发<view>

bindtap：绑定事件处理函数，当前元素上并不会阻止自己的冒泡事件向上冒泡传递。eg:会触发<view>

删除无关代码，更改相应代码。weekly.js:

  f0:function(event){
    this.setData({
      currentIndex: this.data.WeeklyMovieList.length - 1
    })
  }

效果图：

点击“返回本周”，返回最后一页。

-------------------------------------------------------------

总结：类似轮播图，添加按钮等点击跳转事件。

被自己蠢哭

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
电影周周看V2

目录：1.数据绑定2.小程序运行环境与基本架构3.条件渲染（wx:if）4.列表渲染（wx:for）5.使用swiper组件6.页面的生命周期函数7.更新数据8.事件机制-------------------------------------------------------------------------------------------------...
复制链接

扫一扫

专栏目录