侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~ ~
侧边栏特效一
先看效果:
wxml:
& lt; !——页面//index.wxml——比;
& lt;视图类=耙趁妗北?
& lt;视图类=皃age-bottom”比;
祝辞& lt;视图类="页面内容”;
& lt;视图类=皐c”比;
& lt; text>第一个item1
& lt;/view>
& lt;视图类=皐c”比;
& lt; text>第二个item2
& lt;/view>
& lt;视图类=皐c”比;
& lt; text>第三个item3
& lt;/view>
& lt;视图类=皐c”比;
& lt; text>第四个item4
& lt;/view>
& lt;/view>
& lt;/view>
& lt;视图类=" page-top{{打开& # 63;“c-state1”:“}}”在
& lt;图像bindtap=" tap_ch " src=" https://www.yisu.com/images/btn.png "祝辞& lt;/image>
& lt;/view>
& lt;/view>之前
搭建上下两层界面
写一段css3的右移动画样式.c-state1
wxs:
.c-state1 {
变换:旋转(0度)规模(1)翻译(75%,0%);
-webkit-transform:旋转(0度)规模(1)翻译(75%,0%);
}
点击按钮,添加样式.c-state1
再点击,移除样式.c-state1
先看效果:
滑动且屏幕缩小
wxs:
.c-state2 {
变换:旋转(0度)规模(8)翻译(75%,0%);
-webkit-transform:旋转(0度)规模(8)翻译(75%,0%);
}
.c-state2 {
变换:旋转(0度)规模(8)翻译(75%,0%);
-webkit-transform:旋转(0度)规模(8)翻译(75%,0%);
}
wxml代码和特效一相同
.c-state2与.c-state1唯一不同在于刻度值
js代码:
页面({
数据:{
开放:假
},
tap_ch:函数(e) {
如果(this.data.open) {
this.setData ({
开放:假
});
其他}{
this.setData ({
开放:真
});
}
}
})
页面({
数据:{
开放:假
},
tap_ch:函数(e) {
如果(this.data.open) {
this.setData ({
开放:假
});
其他}{
this.setData ({
开放:真
});
}
}
})
代码很简单,就是通过开放值控制的观点对类的选取
先看效果:
与特效二不同在于,不仅可以点击按钮触发侧滑,还可以拖动主界面触发侧滑特效
js代码:
tap_start:函数(e) {//touchstart事件
this.data。马克=this.data。纽马克=e.touches [0] .pageX;
},
tap_drag:函数(e) {//touchmove事件/*
*手指从左向右移动
* @newmark是指移动的最新点的x轴坐标,@mark是指原点x轴坐标
*/this.data。纽马克=e.touches [0] .pageX;
如果(this.data。马克& lt;this.data.newmark) {
这一点。istoright=true;
}/*
*手指从右向左移动
* @newmark是指移动的最新点的x轴坐标,@mark是指原点x轴坐标
*/如果(this.data。马克比;this.data.newmark) {
这一点。istoright=false;
}
this.data。马克=this.data.newmark;
},
tap_end:函数(e) {//touchend事件
this.data。马克=0;
this.data。纽马克=0;
如果(this.istoright) {
this.setData ({
开放:真
});
其他}{
this.setData ({
开放:假
});
}
}
tap_start:函数(e) {//touchstart事件
this.data。马克=this.data。纽马克=e.touches [0] .pageX;
},
tap_drag:函数(e) {//touchmove事件/*
*手指从左向右移动
* @newmark是指移动的最新点的x轴坐标,@mark是指原点x轴坐标
*/this.data。纽马克=e.touches [0] .pageX;
如果(this.data。马克& lt;this.data.newmark) {
这一点。istoright=true;
}/*
*手指从右向左移动
* @newmark是指移动的最新点的x轴坐标,@mark是指原点x轴坐标
*/如果(this.data。马克比;this.data.newmark) {
这一点。istoright=false;
}
this.data。马克=this.data.newmark;
},
tap_end:函数(e) {//touchend事件
this.data。马克=0;
this.data。纽马克=0;
如果(this.istoright) {
this.setData ({
开放:真
});
其他}{
this.setData ({
开放:假
});
}
}
