关键词:
仿了潮汐睡眠小程序的代码。【如果有侵权联系删除
最近做的项目有个弹出层效果,类似音乐播放器那种。按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下。
首先善用度娘反编译弄到了源码,但是打不开。然后自己研究源码发现他们用的是movable-view实现的。
于是仿照着搭出了基础框架。
新建了个组件
wxml
<!--components/playpanel/playpanel.wxml--> <movable-area style="height:areaHpx;" class="wrapper"> <movable-view bindchange="onPresent" bindtouchend="dragPanelEnd" bindtouchstart="dragPanelStart" class="sleep-panel-wrapper" damping="40" direction="vertical" friction="1" inertia="false" outOfBounds="false" style="padding-top:0px" x="0" y="sleepPanelPosition" class="panel"> <view class="" bindtap="presentPanel" hover-class="none" hover-stop-propagation="false"> 背景内容 </view> </movable-view> </movable-area> <scroll-view scroll-y style="height:400rpx" class="scroll-w" wx:if="showlist"> 歌曲列表 <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view>
歌曲列表提取出来是因为滚动组件和可拖拽的手势事件会互相影响,如果不需要弹出层有可滚动的区域可以无视。
js部分精简一下就是这样,abcd这些变量名应该是源码做了加密……appjs里还要定义一下初始数据
// components/playpanel/playpanel.js let d = getApp(); Component( /** * 组件的属性列表 */ properties: areaH:Number , /** * 组件的初始数据 */ data: sleepPanelPosition: d.globalData.screenHeight - (d.globalData.isFullScreen ? 24 : 0) - 80 / (375 / d.globalData.screenWidth), topPosition: d.globalData.statusBarHeight + d.globalData.navBarHeight, bottomPosition: d.globalData.screenHeight - (d.globalData.isFullScreen ? 24 : 0) - 80 / (375 / d.globalData.screenWidth), presentProgress: 0, disableAnimated: !1, showlist:false, , /** * 组件的方法列表 */ methods: dragPanelEnd(e) let changedTouches = e.changedTouches; let pageY = changedTouches[0].pageY; let topPosition = this.data.topPosition; let bottomPosition = this.data.bottomPosition; let distance = pageY - this.dragOrigin; let speed = (bottomPosition - topPosition)/10; let h = 0; h = this.data.sleepPanelPosition === topPosition ? distance > speed ? bottomPosition : topPosition : distance < -speed ?topPosition : bottomPosition,this.setData( sleepPanelPosition: h, showlist: h === topPosition ); , presentPanel() const sleepPanelPosition: a, topPosition: b, bottomPosition: c = this.data; this.setData( sleepPanelPosition: a === b ? c : b, ); let showList = this.data.sleepPanelPosition === b this.setData( showlist: showList ) , dragPanelStart(a) const changedTouches: b = a; if (b[0]) const pageY: a = b[0]; this.dragOrigin = a; , onPresent(detail: a) const y: b = a, topPosition: c, bottomPosition: d = this.data, e = 1 - parseInt(1e3 * ((b - c) / (d - c))) / 1e3; e !== this.data.presentProgress && this.setData( presentProgress: e ), this.data.disableAnimated || this.setData( disableAnimated: !0 ), clearTimeout(this.recoverAnimation), this.recoverAnimation = setTimeout(() => this.setData( disableAnimated: !1 ), this.recoverAnimation = null; , 100); , )
//app.js ``` onShow() wx.getSystemInfo( success: a => const screenHeight: b, screenWidth: c, statusBarHeight: d = a; this.globalData.isFullScreen = parseInt(100 * (c / b)) < parseInt(100 * (9 / 17)), this.globalData.isBiggerScreen = 667 < b, this.globalData.statusBarHeight = d, this.globalData.navBarHeight = 44, this.globalData.navBarFontSize = 18.5, this.globalData.btnScopeSize = 40, this.globalData.btnSize = 32, this.globalData.screenHeight = b, this.globalData.screenWidth = c; ); , ```
wxss部分,主要是.panel不要设置top值,其他好像没啥。
/* components/playpanel/playpanel.wxss */ .wrapper position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100vw; height: 200vh; pointer-events:none; .panel width: 100%; background: rgba(233, 233, 255, 0.8); height: 100vh; pointer-events: auto; .scroll-view-item height: 300rpx; .bc_green background: green; .bc_red background: red; .bc_yellow background: yellow; .bc_blue background: blue; .scroll-w position: fixed; bottom: 0;
移动端可拖拽的进度条
原生js 移动端可拖拽的进度条效果图:代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>干货-课程-完成</title><style>ul.lanren{margin:100pxauto;}.scal 查看详情
js中可拖拽的甘特图和流程图
甘特图:https://www.douban.com/note/441706674/https://www.uedsc.com/jquery-ganttview.htmlhttps://github.com/thegrubbsian/jquery.ganttViewhttp://download.csdn.net/detail/hspeed/5479645http://www.cnblogs.co 查看详情
编写可拖拽的弹窗(代码片段)
可拖拽的弹窗在刚刚重构完的项目中使用到了elementui框架,踩了不少坑也学到了不少的东西。其中比较麻烦的是它的dialog弹窗组件是无法移动拖拽的,然而客户又强烈的要求一定要有这个功能,所以就自己写了个可拖拽的弹窗组... 查看详情
如何制作自己的微信小程序
...管理后台填写小程序的基本信息。步骤二:通过SaaS平台制作微信小程序店铺1、注册得有店账号,创建店铺,填写店铺的基本信息:名称、主营品类、店铺地址等。2、系统会根据你的主营品类为你推荐主题模板,选择一键启用即... 查看详情
可拖拽listview基本使用技巧(dragsortlistview)
可拖拽的listview,DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的item上下拖拽效果以便达到美化界面的作用。 先来看三张效果图。 第一张为初始的DragSortListView效... 查看详情
拖拽的效果第一步设置可拖拽的属性draggable="true"绑定drag事件第二步设置放置位置触发的事件dragover第三步设置放置之后
(function(){/*-------节点--------*/varmyimg=document.getElementById(‘myimg‘);vardropBox=document.getElementById(‘dropBox‘);/*-------事件绑定--------*/myimg.ondragstart=drag;dropBox.ondragover=dragover;dropB 查看详情
android自定义view实现可拖拽的进度条
...到一条与控件宽度相同的直线,并把路径设置给PathMeasure使用PathMeasure得出当前进度的路径并进行绘制,这里我将上一步的绘制放在了一起这个矩形的宽度需要我们用绘制最长的文字来确定其宽高另外矩形的显示位置也是以当前... 查看详情
nestable可拖拽树
...wangmj518/article/details/81746523 Nestable是基于Bootstrap的一个可拖拽的树结构表现插件。下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看。下图是我在现在系统中用到的Nestable,对系统模块排序。&nbs... 查看详情
简单的微信小程序页面怎么制作
...小程序对企业对客户来说都不太实用,建议根据企业需求制作小程序,做一款展示类或者介绍类也不贵的参考技术A点击“企业”选项,然后就可以填写各种信息了。注册服务号需要填写的信息比较多,微信官方要求所有的信息... 查看详情
可拖拽listview基本使用技巧(dragsortlistview)
可拖拽的listview,DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的item上下拖拽效果以便达到美化界面的作用。 先来看三张效果图。 第一张为初始的DragSortListView效... 查看详情
微信小程序怎么做店铺(微信小程序店铺怎么开通制作)
...资源,提升销售额。那么微信小程序店铺到底要怎么开通制作呢?具体教程如下:1.要开通微信小程序店铺,得先有一个小程序账号,所以你要先去微信公众平台注册一个小程序账号,并且完成认证。2.搜索进入乔拓云网,注册... 查看详情
一统天下flutter(代码片段)
...:lib\\input\\drag.dart/**Draggable/DragTarget-拖拽**Draggable-按下后可拖拽的对象*LongPressDraggable-长按后可拖拽的对象*DragTarget-拖拽目标,可拖拽对象拖拽到DragTarget后可以有交互*/import\'package:flutter/material.dart\';import\'package:flutter_demo/helper.dart\... 查看详情
uniapp开发的微信小程序,没有appid可以打开吗
...无法打开微信小程序的。参考技术A没有appid是无法打开和使用uni-app开发的微信小程序的,因为appid是小程序的唯一标识,是每一个小程序的唯一标识,没有appid的话,就无法在微信小程序中打开和使用uni-app开发的小程序,所以,... 查看详情
clevercode开发的微信小程序,推荐给你使用
欢迎微信扫码使用或者点击+长按图片保存然后微信扫一扫选择该图片使用。希望给多提点建议。1经期速记经期记录专用版,比你更懂你!2备孕天使备孕神器,小天使快速来临! 查看详情
clevercode开发的微信小程序,推荐给你使用
欢迎微信扫码使用或者点击+长按图片保存然后微信扫一扫选择该图片使用。希望给多提点建议。1经期速记经期记录专用版,比你更懂你!2备孕天使备孕神器,小天使快速来临! 查看详情
自己的微信小程序学习笔记——第三方ui库lin-ui的加载及使用(代码片段)
...自己的微信小程序学习笔记【1】——小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记【2】——从零开始新建项目文章目录其他微信小程序的学习笔记前言一、Lin-UI组件库1.使用组件库的前提2.Lin-Ui的安装方式二... 查看详情
微信小程序怎么用webstore开发
...直接启动开发者工具。如果是首次启动开发者工具,需要使用开发者的微信号扫码登录。登陆后,点击「添加项目」按钮,填写AppID(如果没有,则点击无AppID)和项目名称。接着,在项目目录中点击「选择」,新建一个文件夹... 查看详情
js+css+html点击登录后弹出可拖拽的模态框(代码片段)
js+css+html点击登录后弹出可拖拽的模态框1案例概述2编写HTML代码3编写CSS代码4编写JavaScript代码5总代码1案例概述我们经常能在网页上见到,当点击登录之后,就会弹出一个对话框,对话框中输入用户名和密码就可... 查看详情