最近工作中有项目要使用微信小程序技术进行开发，其中一项功能困扰了我很久，卡片滑动动效以及手势识别。经过一番研究和参考，现在把成果展示。记录自己踩到的坑，如果大家有需要，也可以帮助到大家。 效果图：首先是卡片布局的实现：图片（一） 如图所示，我采用绝对定位absolute的方式，辅助index，可以实现卡片的层叠效果。注意：三张卡片一定都是相同的定位，否则index可能不起作用。 代码： //设置position: absolute; left：...
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下 wxml: <view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" > </view>index.js: var touchStartX = 0;//触摸时的原点 var touchStartY = 0;//触摸时的原点 var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动 var interval = "";// 记录/清理时间记录 var touchMoveX = 0; // x轴方向移动...
一、bindtap事件在wxml文件里绑定：<view class=wel-list bindtap=TZdown><image src="/images/welcome_08.png"></image><text>C语言资料下载</text></view>在js文件里相应： Page({TZdown: function () {wx.navigateTo({url: ../download/download});} })二、bindinput事件wxml文件： <input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" /> <input type="number" placehol...
说到页面之间的跳转，跳转中顺带些参数，在程序猿的生活中是很常用的，下面就让我们来看看吧！ 这里有两种方法来解决： 方法一就是我们常用的本地储存，在当前子级页面用（ wx.setStorage || wx.setStorageSync ）储存好，跳转到父级页面的时候取出，采用（ wx.getStorage || wx.getStorageSync ），在这里，退出的时候一定要记得清除缓存哦！！！（ wx.clearStorage || wx.clearStorageSync ） 方法二方法二就要用到我们小程序的知...
有的时候我们上传头像，商品图片这些的时候有的希望上传的是自己想要的图片形状，吧图片宽高固定死的话，他又会变形，比列差不多的看起来没什么区别，不固定的话，他们会宽的高的不一样，看起来完全不舒服，不美观了。 所以想了个这样的办法，用这个裁剪工具，在选择图片的时候，就把图片的大小裁剪成自己想要的大小，这样就都一致了，下面我们来看看吧！wxml: <view class="wancll-padded-15 wancll-bg-white wancll-font-size-14...
微信小程序团队在7月30日更新了 基础库 2.8.0其中新添加了小程序后台持续定位功能和联系定位的接口从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.stopLocationUpdate//关闭监听实时位置变化，前后台都停止消息接收 3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息 4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息 详细信息可查看https://developers.weixin.qq.com/minipr...
前言 最近做一个项目，由于用到了竖向swiper，导致占用屏幕过大，用户滑动总是滑动到swiper组件，页面无法向下拉动，于是找各种办法禁止用户手动滑动swiper组件。 经过网上一番查找，网友们也是闹洞大开，各种方法都想出来了，有用透明蒙层覆盖的，这不失为一种很好的解决办法，但是如果swiper上有元素需要点击就没有办法了。 继续查找，于是找到了用 catchtouchmove 事件来截获用户手动滑动事件，这样既解决了禁用用户手动滑动，有...
在做 React Native 应用时，如果需要在 App 里面内嵌 H5 页面，那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯，但是在小程序里面，虽然也提供了一个 webview 组件，但是，在进行 postMessage 通讯时，官方文档里面给出了一条很变态的说明： 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data 是多次 postMessage 的参数组成的数组 这...
在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了^o^ 1.效果图2.相关代码使用组件形式实现键盘输入 组件代码index.wxml <view class="carPlate" wx:if="{{show}}"><block wx:if="{{type==1}}"><view class="wordList"><view class="wordItem" wx:for="{{cityKeyword1}}" wx:key="{{ite...
一、前言由于微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发。 官方连接：https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二、实现思路自己写一个微信授权登录页面让用户实现点击的功能，也就是实现了通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的时候，判断用户是否授权了，如果没有授权的话就显示授权...
一：实现定位及到指定位置导航所需组件及API 1：组件：map(地图组件) 2：API：wx.getLocation(Object object)(获取当前的地理位置、速度)，wx.openLocation(Object object)(使用微信内置地图查看位置) 二：代码实现 1：wxml <view> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 10...
一、效果图二、实现原理跟网页的下拉列表实现是一样的，刚刚开始默认下拉的内容的是不显示的（display:none），然后通过点击的时候，去更改 display 的属性值，来实现下拉的效果。然后下拉的动画的通过 css3 的 animation 来实现的。 CSS3中添加的新属性 animation 是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性 —— @keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、...
一、效果图讲什么都不如直接上效果图好，所以我们先来看下实现效果如何。 通过滑动屏幕，或者点击左上角的图标按钮，都能实现侧边栏的划出效果。二、原理解析1.先实现侧边栏的内容，让侧边栏的内容居左，然后将侧边栏的内容置于屏幕的最底部。 2.接着实现主页的内容，并且让主页的内容默认是覆盖在侧边栏的内容上面。 3.然后，实现手指滑动屏幕的时候，主页的内容，向左滑动一定的宽度，让侧边栏的内容显示出来，而滑动的效果是通过...
一、小程序部分 这是理财系统的前端,江苏海洋大学微信小程序比赛，最后获得了一等奖 GitHub：https://github.com/GeorgeLeoo/finance 1. 项目描述(1). 此项目为记账小程序 (2). 包括账单、图表、搜索、用户等多个子模块 (3). 使用微信小程序技术 (4). 采用模块化、组件化、工程化等模式开发2. 项目功能界面在 1.0.2版本中删除了扇形图 3. 项目目录 * pages：页面* components：组件* utils：工具类 |-- util.js：工具类 |-- wxcha...
问题由于wx.request()发起的每次请求对于服务器来说都是不同的会话（wx.request()请求是先经过微信服务器再到达我们的服务器），这样会导致后续请求都相当于未登录的状态。解决方案将登陆时后端返回的session保存在本地，然后将session存放在cookie中以请求头的方式带回给服务端实现代码1.请求登陆接口获取到header["Set-Cookie"]，并储存//app.js App({onLaunch() {wx.login({ // 登录// 发送 res.code 到后台换取 openId, sessio...