1. wxml
~~~
<view class="box"bindtouchstart="touchstart"bindtouchmove="touchmove"bindtouchend="touchend">
<view animation="{{animation1}}"bindtap="scrollLeft">
<image src="{{clubs[0]}}"class="img"style="width:{{img_width_one}}rpx"mode='aspectFill'/>
</view>
<view animation="{{animation2}}"bindtap="scrollLeft">
<image src="{{clubs[1]}}"class="img2"/>
</view>
<view animation="{{animation3}}">
<image src="{{clubs[2]}}"class="img3"style="width:{{img_width_three}}rpx"mode='aspectFill'/>
</view>
</view>
~~~
2. js
~~~
Page({
data: {
img_width_three:60,
img_width_one:60,
clubs: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515151263767&di=7de048755c4fb6136d7937f7d6acc102&imgtype=0&src=http%3A%2F%2Fpic119.nipic.com%2Ffile%2F20161230%2F2168026_223133374033_2.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515151265766&di=428999ef602db706af795035e93f9ec9&imgtype=0&src=http%3A%2F%2Fpic126.nipic.com%2Ffile%2F20170402%2F4402479_111933865038_2.jpg'
]
},
//触摸开始事件
touchstart: function (e) {
this.data.touchDot = e.touches[0].pageX;
var that =this;
this.data.interval = setInterval(function () {
that.data.time += 1;
}, 100);
},
//触摸移动事件
touchmove: function (e) {
let touchMove = e.touches[0].pageX;
let touchDot =this.data.touchDot;
let time =this.data.time;
//向左滑动
if (touchMove - touchDot <= -40 && !this.data.done) {
// console.log("向左滑动");
this.data.done =true;
this.scrollLeft();
}
//向右滑动
if (touchMove - touchDot >=40 && !this.data.done) {
// console.log("向右滑动");
this.data.done =true;
this.scrollRight();
}
},
//触摸结束事件
touchend: function (e) {
clearInterval(this.data.interval);
this.data.time =0;
this.data.done =false;
},
//向左滑动事件
scrollLeft() {
var animation1 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
var animation2 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
var animation3 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
this.setData({
img_width_three: 200
})
this.animation1 = animation1;
this.animation2 = animation2;
this.animation3 = animation3;
this.animation1.translateX(-60).opacity(0.5).step();
this.animation2.translateX(-60).opacity(1).scale(0.8,0.8).step();
this.animation3.translateX(-60).opacity(0.5).scale(1.2,1.2).step();
this.setData({
animation1: animation1.export(),
animation2: animation2.export(),
animation3: animation3.export(),
})
var that =this;
setTimeout(function () {
that.animation1.translateX(0).opacity(0.5).step({ duration:0, timingFunction:'linear' });
that.animation2.translateX(0).opacity(1).scale(1,1).step({ duration:0, timingFunction:'linear' });
that.animation3.translateX(0).opacity(0.5).scale(1,1).step({ duration:0, timingFunction:'linear' });
that.setData({
animation1: animation1.export(),
animation2: animation2.export(),
animation3: animation3.export(),
img_width_three: 60
})
}.bind(this),300)
let array =this.data.clubs;
let shift = array.shift();
array.push(shift);
setTimeout(function () {
this.setData({
clubs: array
})
}.bind(this),195)
},
//向右滑动事件
scrollRight() {
var animation1 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
var animation2 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
var animation3 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
var animation4 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
var animation5 = wx.createAnimation({
duration: 300,
timingFunction: "linear",
delay: 0
})
this.setData({
img_width_one: 200
})
this.animation1 = animation1;
this.animation2 = animation2;
this.animation3 = animation3;
this.animation1.translateX(60).opacity(0.5).scale(1.2,1.2).step();
this.animation2.translateX(60).opacity(1).step();
this.animation3.translateX(60).opacity(0.5).step();
this.setData({
animation1: animation1.export(),
animation2: animation2.export(),
animation3: animation3.export(),
})
var that =this;
setTimeout(function () {
that.animation1.translateX(0).opacity(0.5).scale(1,1).step({ duration:0, timingFunction:'linear' });
that.animation2.translateX(0).opacity(1).scale(1,1).step({ duration:0, timingFunction:'linear' });
that.animation3.translateX(0).opacity(0.5).step({ duration:0, timingFunction:'linear' });
that.setData({
animation1: animation1.export(),
animation2: animation2.export(),
animation3: animation3.export(),
img_width_one: 60
})
}.bind(this),300)
let array =this.data.clubs;
let pop = array.pop();
array.unshift(pop);
setTimeout(function () {
this.setData({
clubs: array
})
}.bind(this),195)
}
})
~~~
3. wxss
~~~
/* pages/prodtype/prodType.wxss */
.box {
z-index:0;
white-space:nowrap;
display:flex;
align-items:center;
justify-content:center;
}
.img {
margin-right:15rpx;
height:520rpx;
}
.img2 {
height:600rpx;
width:600rpx;
}
.img3 {
margin-left:15rpx;
height:520rpx;
}
.box .club:nth-child(1) {
transform:scale(1,1)translateX(0rpx);
opacity:0.2;
z-index:10;
}
.box .club:nth-child(2) {
transform:scale(1,1);
opacity:1;
z-index:100;
}
.box .club:nth-child(3) {
transform:scale(1,1)translateX(0rpx);
opacity:0.2;
z-index:10;
}
~~~
~~~
- 前期准备
- 软件安装配置
- 语法 以及 功能 的实现
- 小程序中的 轮播
- 翻转轮播
- 实现 跳转 页面
- 详谈 跳转页面
- for 循环 渲染 页面（重点）
- 点击 改变 元素内容
- 功能 封装(创建、使用 模板）（重点）
- js模块化（重点）
- if-else实现 三目运算
- 底部导航栏tabBar 实现
- 小程序中的 函数调用 方法
- 小程序中的 block 包裹元素
- 小程序中的 hover事件
- import 标签(重点）
- 其他
- 在本地模拟接口取数据
- 点击跳转 并将该元素的id一起传递给跳转的页面
- 点击详情页显示
- 点击事件（bindtap/catchtap）
- 图片的mode属性
- 跳转页面时实现顶部显示页面标题
- hello world
- 将豆瓣服务器接口设置在本地
- 组件
- 地图
- 下拉刷新
- 数据加载 loading...
- 动态设置导航（title设置）
- 实现js代码的模块化
- 传参
- 组件中的生命周期函数
- 实战
- 发送http请求
- 可用的豆瓣接口
- 处理豆瓣列表页的数据
- 从接口上取数据渲染到页面上1
- 从接口上取数据渲染页面实现瀑布流2
- 瀑布流
- 音乐播放
- 文章详情页
- 音乐播放组件
- 音乐播放 最终版
- 电影（封装取数据渲染）
- 分享与收藏
- 搜索框
- 将电影列表数据放缓存
- 零碎知识点
- 谈组件
- 请求封装 （重点）
- 实现简单需求的请求失败的封装
- 使用class实现显示各种错误信息
- 再次封装带class的请求实现改变里面给的url
- 使用promise 封装http
- promise
- generator
- 01.介绍
- 02. 基本
- 03. 实例
- 04.yield
- asyns
- 01. 介绍
- 02. 使用
- 03. 取豆瓣
- 子组件（模板文件）接收父组件传来的参数并改变其值
- 模块化
- 在模板中提取相同的部分behavior
- 字符串与数组之间的转换
- 子组件向父组件传参
- 谈 triggerEvent
- 整体展示
- 父组件向子组件传wxml （在两个组件比较相似的情况 定义卡 槽传 wxml）
- 传css （在父组件中定义子组件的样式）
- 使用wxs给wxml传js
- 点赞
- 小程序中的正则
- 组件中实现下拉刷新
- 用户授权
- 组件点击图片获取信息
- 说明
- 小程序上下滑动