微信小程序第二天
前端框架 React、Vue、Angular这三个框架。
mvvm的模式(模型视图视图模型),mvc模式(模型视图控制器)
数据交互
数据交互:简单说就是前后台交互,展示在前端页面的时候的视频、图像等都是后端发送给而来。前端的文本变成了变量,跟着后台走。
名字可以随便起,现在不是变量,想换成变量,加上两个大括号
此时跳转到user.js里面
里面就是一些page的参数,此时要将值传入,即在data中修改属性,data里面数据改变,前端显示会改变,这就叫做数据绑定。page相当于一个对象,后面有属性和方法。如下图,text参数传入:
js文件里还有其他的一些函数,当进行跳转的时候,加到栈的时候,才进行初次渲染和显示,挪出去的时候卸载,对应生命周期函数那些。
通过for循环制作轮播图:列表渲染
同样的道理,图片也是一样,可以利用变量
<image src="{{srcC}}"></image>
data中设置一个图片地址,狗狗图片就输出了。这样可以利用此原理制作一个狗狗轮播图
第一天学习的轮播图的基础上,在js的data中定义一个数组srcArr[ ],加上图片地址,用for循环来遍历
<swiper autoplay="{{Aplay}}">
<swiper-item wx:for="{{srcArr}}" wx:key="index">
<image src="{{item}}"></image>
</swiper-item>
</swiper>
再加上一个Aplay属性,值为false,设置一个开关(触发器)控制滑块是否自动切换
图中标记的Aplaychange即为触发器函数,Aplay默认设置为false,开关关闭,无法移动,点击开关之后,Aplaychange函数生效:令Aplay值发生转变即可达到控制开关的效果。
但是改变Aplay不能直接等于
得通过this.setData({Applay:true})这种方式来转变。
此时得到的只是开了就变成true,但是关闭不能变回false,如下方式实现true 和 false 的转变
//开关控制滑块自动切换
Aplaychange:function(){
console.log(this.data.Aplay)
this.setData(
{Aplay:!this.data.Aplay
})
至此,开关控制的轮播图实现。
渐变轮播图:绝对定位
三张狗狗图,做成一个渐变的自动循环轮播图
利用子代选择器,加上绝对定位,在wxss中设置
给上绝对定位,三张图都堆叠到一起,不加条件显示为最后
一张图片。加上z-index,可以改变顺序,z-index:1 时,显示在最上层,为0不显示,如下图,狗狗图变化
因此index由1、0、0变为0、1、0,就可以实现图片的转换,出现lbtfn函数未发现,加上this引用属性。
只遍历到最后一张图片出现如下错误
此时要解决第三张图切回第一张图,来写个循环实现
//轮播图函数,自动切换图片 user.js
lbtfn:function(){
//改变lbtimage数组中每个元素num的值
var arr = this.data.lbtimage;
for(let i = 0; i < arr.length; i++)
{
if (arr[i].num == 1) {
arr[i].num = 0;
if(i==arr.length-1){
arr[0].num=1;
}else{
arr[i+1].num =1;
}
break;
}
}
this.setData({
lbtimage:arr
})
},
设置wxml页面的for循环lbtimage为一个数组,传递参数item.num,如上为循环函数
lbtimage图片数组如下
渐变效果 all 2s linear;
因为在初次渲染onReady中,设置的lbtfn是2000ms显示另一张图,所以设置2s的渐变效果。
至此,渐变轮播图实现。
音乐组件的编写
<text>这个是一个音频组件</text>
<audio src="../music/bgm.mp3" controls="{{true}}" poster="../music/11.jpg" author="薛之谦" name="丑八怪"></audio>
歌曲清单列表
bindtap
,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view class="main">
<!-- 歌曲清单列表 -->
<view class="songlist">
<view class="showSongName" bindtap="showListChange"> <!--初始显示,bindtap查找绑定的处理函数 -->
<text>{{showSongName}}</text>
</view>
<view class="list" wx:if="{{showList}}">
<view bindtap="showSongNameChange" wx:for="{{songNameList}}" wx:key="index" data-index="{{index}}">
<text>{{ item }}</text>
</view>
</view>
</view>
</view>
同样是利用数据绑定和参数的传递,控制下拉歌曲菜单的改变效果
data: {
showList:false, //控制下拉列表是否显示
showSongName:"薛之 - 丑八怪", //正在显示的歌曲名字
songNameList:[ //將所有歌名放入数组中
"薛之谦 - 丑八怪",
"赵雷 - 鼓楼",
"毛不易 - 别再闹了"
]
},
//定义函数 点击歌名列表,切换显示的歌名 歌名列表隐藏
showSongNameChange:function(Event){
//console.log(Event.currentTarget.dataset.index); // 找到index数值的变化,设置num
var num = Event.currentTarget.dataset.index;
//歌名列表隐藏
this.setData({
showList:false,
showSongName:this.data.songNameList[num]
})
},
//定义函数 点击歌名,显示歌名的列表
showListChange:function(){
this.setData({
showList:true
})
},
实现效果及第二天成果如下(其实都为动态的,懒得录了,睡了):