这篇文章主要讲解微信小程序如何实现 侧边栏滑动功能。
实现的思路为:
1、wxml页面结构分为2层:侧边栏菜单、正文部分。
2、正文部分监听touchstart、touchmove、touchend触摸事件。用于判断是否左右滑动,来显示右侧菜单。
3、需要给侧边栏添加移动动画样式。
实现代码如下:
wxml:
<view class="page">
<view class="side"><!--侧滑菜单-->
<text>内容</text>
</view>
<view bindtouchmove="tap_move" bindtouchend="tap_end" bindtouchstart="tap_start" class="content {{side.newopen?'state':''}}">
<image bindtap="tap_click" src="../../images/ic_column.png"></image>
</view>
</view>
wxss:
.side{
height: 100%;
width: 750rpx;
position: fixed;
background: #C1C1C1;
}
.content{
height: 100%;
width: 750rpx;
position: fixed;
background:#2B9BEB;
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
}
.state{
transform: rotate(0deg) scale(1) translate(70%,0%);
-webkit-transform: rotate(0deg) scale(1) translate(70%,0%);
}
js:
Page({
data: {
side: {//滑动操作
pageX: 0,
newpageX: 0,
open: false,
newopen: false,//判断侧边栏是否打开-显示
},
},
tap_click:function(){//点击菜单
this.data.side.open =!this.data.side.open;
this.setData({'side.newopen':this.data.side.open});
},
tap_start: function(e){//touchstart事件
this.data.side.pageX = this.data.side.newpageX = e.touches[0].pageX;
},
tap_move: function(e){//touchmove事件
this.data.side.newpageX = e.touches[0].pageX;
},
tap_end: function(){//touchend事件
if(this.data.side.pageX != this.data.side.newpageX){
this.data.side.open = this.data.side.pageX < this.data.side.newpageX ? true : false;
this.setData({'side.newopen': this.data.side.open});
}
},
})
完结~~~~
如何在 wxml 页面中截取数据?取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。
微信创造了 WXS ,除了提高性能,还有什么原因?WXS(WeiXin Script)是微信创造的一套脚本语言,它的官方说法是:“WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致”。
也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:
据说移动互联网的轻量级应用是微信applet。简而言之,applet是基于微信平台的应用程序。目前,小方案的主题非常重要。它通知主要媒体和新闻,以及小程序如何打开。它也在增加,甚至个人也可以开发它
聊一聊最近的一个项目,这个项目是一个收书、售书的小程序,有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户,但要求无论用户是否授权都皆可使用,但同时也要求部分功能对不授权的用户限制开放。
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
接入流程:1. 按照文档获取AppID、API Key、Secret Key,进行Access Token(用户身份验证和授权的凭证)的生成,2. 选择人脸识别-->人脸检测,人脸识别接口分为V2和V3两个版本,确认在百度云后台获得的是V2还是v3版本接口权限。
在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 mpvue、taro 等这些编译型框架
在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?
本文使用md5和rc4作为示例代码,可以根据实际项目选择不同的加密方式:在百度静态资源公共库中搜索crypto-js、用到CryptoJS的js放到同一个文件中,并在文件最下方暴露接口module.exports = CryptoJS
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!