微信小程序实现加入购物车滑动轨迹

本文实例为大家分享了微信小程序实现加入购物车滑动轨迹的具体代码,供大家参考,具体内容如下

index.wxss

.good_box {
 width: 80rpx;
 height: 80rpx;
 position: fixed;
 border-radius: 50%;
 overflow: hidden;
 left: 50%;
 top: 50%;
 z-index: 99;
}

index.wxml

<view class="iconfont icongouwuche recommend_item_shopcar" bindtap="touchOnGoods"></view>
<view class="good_box" hidden="{{hide_good_box}}" style="left: {{bus_x}}px; top: {{bus_y}}px;">
 <image class="image" src="/img/luntai2.png"></image>
</view>

**app.js **

//app.js
App({
 onLaunch: function() {
 //调用API从本地缓存中获取数据
 // var logs = wx.getStorageSync('logs') || []
 // logs.unshift(Date.now())
 // wx.setStorageSync('logs', logs)
 this.screenSize();
 },
 getUserInfo: function(cb) {
 var that = this
 if (this.globalData.userInfo) {
  typeof cb == "function" && cb(this.globalData.userInfo)
 } else {
  //调用登录接口
  wx.login({
  success: function() {
   wx.getUserInfo({
   success: function(res) {
    that.globalData.userInfo = res.userInfo
    typeof cb == "function" && cb(that.globalData.userInfo)
   }
   })
  }
  })
 }
 },
 //获取屏幕[宽、高]

 screenSize: function() {
 var that = this;
 wx.getSystemInfo({
  success: function(res) {
  that.globalData.ww = res.windowWidth;
  that.globalData.hh = res.windowHeight;
  }

 })

 },

 /**

  * @param sx 起始点x坐标
  * @param sy 起始点y坐标
  * @param cx 控制点x坐标
  * @param cy 控制点y坐标
  * @param ex 结束点x坐标
  * @param ey 结束点y坐标
  * @param part 将起始点到控制点的线段分成的份数,数值越高,计算出的曲线越精确
  * @return 贝塞尔曲线坐标

  */

 bezier: function(points, part) {

 let sx = points[0]['x'];
 let sy = points[0]['y'];
 let cx = points[1]['x'];
 let cy = points[1]['y'];
 let ex = points[2]['x'];
 let ey = points[2]['y'];
 var bezier_points = [];

 // 起始点到控制点的x和y每次的增量
 var changeX1 = (cx - sx) / part;
 var changeY1 = (cy - sy) / part;

 // 控制点到结束点的x和y每次的增量
 var changeX2 = (ex - cx) / part;
 var changeY2 = (ey - cy) / part;

 //循环计算
 for (var i = 0; i <= part; i++) {
  // 计算两个动点的坐标

  var qx1 = sx + changeX1 * i;
  var qy1 = sy + changeY1 * i;
  var qx2 = cx + changeX2 * i;
  var qy2 = cy + changeY2 * i;

  // 计算得到此时的一个贝塞尔曲线上的点
  var lastX = qx1 + (qx2 - qx1) * i / part;
  var lastY = qy1 + (qy2 - qy1) * i / part;

  // 保存点坐标
  var point = {};
  point['x'] = lastX;
  point['y'] = lastY;
  bezier_points.push(point);

 }

 //console.log(bezier_points)
 return {
  'bezier_points': bezier_points

 };

 },
 globalData: {
 ww:'',
 hh:''
 }
})

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
 data: {
 indicatorDots: true,
 vertical: false,
 autoplay: false,
 interval: 2000,
 duration: 500,
 hide_good_box: true,
 },
 onLoad: function () {
 this.busPos = {};

 this.busPos['x'] = app.globalData.ww / 1.4; //1.4修改轨迹结束时x轴的位置,2是在正中心

 this.busPos['y'] = app.globalData.hh - 10;

 console.log('购物车坐标', this.busPos)
 },
 onShow(){
 app.editTabBar(); //显示自定义的底部导航
 },
 tosearchpage(e){
 wx.navigateTo({
  url: '',
 })
 },
 touchOnGoods: function (e) {
 // 如果good_box正在运动
 if (!this.data.hide_good_box) return;
 this.finger = {};
 var topPoint = {};
 this.finger['x'] = e.touches["0"].clientX;
 this.finger['y'] = e.touches["0"].clientY;

 if (this.finger['y'] < this.busPos['y']) {
  topPoint['y'] = this.finger['y'] - 150;
 } else {
  topPoint['y'] = this.busPos['y'] - 150;

 }
 topPoint['x'] = Math.abs(this.finger['x'] - this.busPos['x']) / 2;
 if (this.finger['x'] > this.busPos['x']) {
  topPoint['x'] = (this.finger['x'] - this.busPos['x']) / 2 + this.busPos['x'];
 } else {
  topPoint['x'] = (this.busPos['x'] - this.finger['x']) / 2 + this.finger['x'];

 }

 this.linePos = app.bezier([this.finger, topPoint, this.busPos], 20);
 this.startAnimation();

 },

 startAnimation: function () {
 var index = 0,
  that = this,
  bezier_points = that.linePos['bezier_points'],
  len = bezier_points.length - 1;
 this.setData({

  hide_good_box: false,
  bus_x: that.finger['x'],
  bus_y: that.finger['y']

 })

 this.timer = setInterval(function () {
  index++;
  that.setData({
  bus_x: bezier_points[index]['x'],
  bus_y: bezier_points[index]['y']
  })

  if (index >= len) {
  clearInterval(that.timer);
  that.setData({
   hide_good_box: true,

  })

  }

 }, 15);

 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实战篇之购物车的实现代码示例

    哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢读者曹明,一个韩国的研究生读者,支持我,并给我鼓励,期待我更新下一篇,我非常感动,瞬间战斗力恢复,其实你们简单的点赞,评论,都是给我最大的支持,好了,煽情完毕,该讲今天的重点了,购物车,购物车的界面实现到不是很难,难点是处理里面的逻辑,无论是小程序,还是APP,购物车的逻辑都是最难的,下面开始教大家

  • 微信小程序 购物车简单实例

    微信小程序,这里实现购物车功能的小demo,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二.点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识,而不用cid,方便遍历 三.全选操作 首次点击即为全部选中,再次点击为全不选,全选按

  • 微信小程序购物车、父子组件传值及calc的注意事项总结

    前言 在做微信小程序时,觉得小组里对购物车的实现不是很完美,就自己尝试的写了下,然后用到了父子组件传值,父子组件传值的话,和vue框架上是非常相似的,以及calc这个css函数,calc有个注意点,自己不怎么用,一时间有差点忘了,这里记录下 下面话不多说了,来一起看看详细的介绍吧 1.效果图 2.子组件实现 要实现图中删除的效果,使用组件的形式更好做点,我当时本想直接在pages里实现,不过结果就是,滑动时,所有的商品都显示了删除按钮,除非用数组将每个商品要移动的距离存储起来,不过这样的话就很麻

  • 微信小程序之购物车功能

    前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(pr

  • 微信小程序实现购物车代码实例详解

    其实购物车都是类似的实现方法,只不过小程序是有他的数据层和业务层,在这里把之前的做法记录一下,分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据,因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据,所以我们把获取的方法写在onShow中,而不是onLoad中: onShow: function () { const cart = wx.getStorageSync("cart"); let address = wx.getStorage

  • 微信小程序利用swiper+css实现购物车商品删除功能

    要实现的购物车效果如下: 小程序通过bind与catch绑定事件,没有event.stopPropagation()方法. bind:不会阻止冒泡事件向上冒泡, catch:可以阻止冒泡事件向上冒泡 用touchstart.touchmove.touchend实现滑块效果,无法动态js控制何时冒泡何时阻止冒泡,就会出现用bind时,左右上下滑动乱窜:用catch,商品区域只能左右滑动,无法上下滚动 而小程序提供的swiper通过css就可以实现删除滑块效果,同时不影响页面的正常滚动.具体如下 <

  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false

  • 微信小程序实现加入购物车滑动轨迹

    本文实例为大家分享了微信小程序实现加入购物车滑动轨迹的具体代码,供大家参考,具体内容如下 index.wxss .good_box { width: 80rpx; height: 80rpx; position: fixed; border-radius: 50%; overflow: hidden; left: 50%; top: 50%; z-index: 99; } index.wxml <view class="iconfont icongouwuche recommend_ite

  • 微信小程序实现简单购物车小功能

    本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 微信小程序定制好看的购物车页面,实现购物车功能,希望对您有所帮助! 1. 应用场景2. 思路分析3. 代码分析4. 具体实现代码 效果截图: 1.应用场景 适用于商城.秒杀.商品购买等类型的小程序,负责将顾客浏览的商品保存下来,方便客户集中比较商品与购买商品. 2.思路分析 实现购物车功能前请思考以下问题: 1.小程序如何布局?使用什么布局能提升页面开发效率?? 2.将购物车功能分为四个小功能:(1)一键全选/取消

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序导航栏跟随滑动效果的实现代码

    效果图 .wxml <view class='tabBar'> <view class='tabItem wx:if="{{tabClick===0?"click":""}}"' bindtap='clickTab' data-index='0'>tab1</view> <view class='tabItem wx:if="{{tabClick===1?"click":&q

  • 微信小程序实现卡片层叠滑动效果

    本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下 代码: js: // index/gun/jsSwiper2/jsSwiper2.js Page({ /** * 页面的初始数据 */ data: { startX: 0, endX: 0, iCenter: 3, datas: [{ id: 1, zIndex: 2, opacity: 0.2, left: 40, iamge: "../../images/1.jpg", animation: nu

  • 微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi

  • 微信小程序实现通过双向滑动缩放图片大小的方法

    本文实例讲述了微信小程序实现通过双向滑动缩放图片大小的方法.分享给大家供大家参考,具体如下: 在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: 0, scale: 1, baseWidth: null, baseHeight: null, scaleWidth: null, scaleHeight: null } }, touchStartHandle(e) { //

  • 微信小程序基于movable-view实现滑动删除效果

    基于movable-view实现的一种较为完美的滑动删除效果 前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道来 1.wxml布局 <view class="list"> <view class="row" wx:for="{{list}}" wx:key="id"> <movable-area class="lis

  • 微信小程序实现页面左右滑动

    本文实例为大家分享了微信小程序实现页面左右滑动的具体代码,供大家参考,具体内容如下 效果: wxml文件 <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} "> <view bindtap=&qu

随机推荐