小程序入门学习05--幻灯片、页面生命周期

幻灯片
swiper

<view class=''>
<!-- swiper幻灯片轮播  默认生成像素150px,image为240 -->
<!-- indicator-dots='{{true}}'显示面板指示 --><swiper class='movie-swiper' indicator-dots='{{true}}'previous-margin='50rpx' next-margin='50rpx'><swiper-item class='movie' wx:for="{{weeklyMovieList}}"><view class='container movie-card'><image class='movie-image'src='{{item.imagePath}}'></image><!-- index:item下标 --><text>第{{index+1}}周:{{item.name}}</text><text>点评：{{item.comment}}</text><text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text></view></swiper-item></swiper>
</view>

.movie-card {height:100%;width:100%;margin:0 20rpx;
}

在这里插入图片描述

<!-- current 幻灯片默认页面，默认为0 -->
<swiper class='movie-swiper' indicator-dots='{{true}}'previous-margin='50rpx' next-margin='50rpx' current='{{weeklyMovieList.length - 1}}'><swiper-item class='movie' wx:for="{{weeklyMovieList}}">

页面生命周期

// onLoad初始化（第一步），在初始化时将currentIndex（已在js中定义）的值赋为最为一页所对应的onLoad: function(options) {this.setData({currentIndex:this.data.weeklyMovieList.length-1})},// 页面每次加载时被调用（第二步）onShow: function () {},// 每次页面渲染完成，可以交互（第三步）onReady: function () {},// 页面隐藏时（加载其他页面）onHide: function () {},// 页面被关闭/卸载时调用，如重定向onUnload: function () {}

单向绑定：视图层更新不会引起内部状态数据变化

this.setData()

<text>{{count}}</text><!-- bindtap（冒泡-唤醒父元素进行下一级处理）和catchtap（非冒泡）均可进行事件绑定 --><button bindtap='f0'>show count</button>

f0:function(event) {//视图层无法更新  this.data.count = this.data.count+1this.setData({//初始化时，无此变量则直接定义并赋值count: this.data.count + 1,//无效标识符放入双引号内 更改名字为教父3"weeklyMovieList[2].name":"教父3"})}

领取限量云产品优惠

小程序入门学习05--幻灯片、页面生命周期相关推荐

微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
微信小程序入门:学习demo以及自己的第一个小程序
<移动软件开发>实验1 一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.使用快速启动模板创建小程序 1.1为小程序命名. ...
小程序入门学习06--data、url传参、调用豆瓣api
豆瓣不能用了,可以用这个 data- 自定义数据属性设置 <view class='container movie-card' bindtap='f1' data-user-name=&quo ...
我的微信小程序入门学习-地图定位
微信小程序开发者工具安装和创建小程序 (地图定位代码) 地图定位案例:最后附带小程序地图定位代码小程序简介小程序特点体验好(编译包不超过1M) "无须安装,即用即走"的特性让 ...
微信小程序入门学习笔记
初体验 app生命周期函数 onLaunch() //一般用来获取用户信息 onShow() //用来判断小程序进入场景里面可以传入参数options,通过options.scene来判断用户场景, ...
小程序入门学习14--用户管理
<button class="call" open-type="getUserInfo" bindgetuserinfo="onInfo&quo ...
小程序入门学习01--Hello World
视频链接文档链接小程序整体结构必须有 app.js app.json app.wxms app.json中的pages写每个页面相对于此项目的路径视频中样例: {"pages" ...
小程序入门学习17--springboot环境配置01
别问,问就是电脑重装了啥都没了 [NEXT公开课]微信小程序+SpringBoot 开发新闻资讯应用 1 环境配置 mysql下载与安装 Install/Remove of the Service ...
小程序入门学习18--springboot环境配置02
springboot官方中文文档 1 pom.xml配置,第一次配置完成需要下载许多文件 <project xmlns="http://maven.apache.org/POM/4.0 ...

小程序入门学习05--幻灯片、页面生命周期

页面生命周期

小程序入门学习05--幻灯片、页面生命周期相关推荐

最新文章

热门文章