资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/用小程序做一个类似于苹果AssistiveTouch功能

用小程序做一个类似于苹果AssistiveTouch功能

MarvinZhang / 2786人阅读

摘要：二我们做这个功能，第二步就是要想思路思路就是，利用微信中的滑动事件，外加控制样式，来完成这个功能。三这是项目的图，废话不多说，直接撸代码。

一、首先我先介绍一下，我们要做一个什么样的项目功能

</>复制代码 
  1.    项目功能就是一个音频点击播放，当点击为播放的状态时，一个音频的动图出现，而且是可以跟随着手指的滑动而滑动，而且，在滑动动图的时候，当前下的页面是不可以跟随着我的滑动而上下滚动，当停止滑动的时候，音频动图停靠在手机的左侧或者右侧，而当前下的页面是可以上下滚动的，功能介绍到此为止，下面我们说一下思路。

二、我们做这个功能，第二步就是要想思路

</>复制代码 
  1. 思路就是，利用微信中的滑动事件，外加控制css样式，来完成这个功能。

三、这是项目的ui图，废话不多说，直接撸代码。

</>复制代码 
  1. 项目样图



四、index.wxml、index.wxss、index.js页面代码

</>复制代码 
  1. *index.wxml页面*
</>复制代码 
  2.     
  3.         
  4.             
  5.             开心奶奶
  6.         
  7.     
  8.     
  9.     
  10.         
  11.         
  12.         
  13.             
  14.             
  15.                 
  16.                     
  17.                     
  18.                         
  19.                             
  20.                         
  21.                         
  22.                             
  23.                         
  24.                     
  25.                     
  26.                         
  27.                     
  28.                     
  29.                         
  30.                             
  31.                         
  32.                         
  33.                             
  34.                         
  35.                     
  36.                     开心奶奶——小小探险家
  37.                 
  38.             
  39.             
  40.                 
  41.                     
  42.                     
  43.                         
  44.                             
  45.                         
  46.                         
  47.                             
  48.                         
  49.                     
  50.                     
  51.                         
  52.                     
  53.                     
  54.                         
  55.                             
  56.                         
  57.                         
  58.                             
  59.                         
  60.                     
  61.                     开心奶奶——小小探险家
  62.                 
  63.             
  64.             
  65.             
  66.         
  67.         
  68.         
  69. ----------
  70. > 重点！！！！
  71.         
  72.         
  73.             
  74.                 
  75.                 
  76.             
  77.         
  78. ----------
  79.         
  80.         
  81.             
  82.                 
  83.                 推荐故事
  84.             
  85.             
  86.                 
  87.                 男孩
  88.             
  89.             
  90.                 
  91.                 女孩
  92.             
  93.         
  94.     
  95.     
  96.     
  97.         
  98.             
  99.                 
  100.                     
  101.                     
  102.                 
  103.                 童话故事里的小智慧
  104.                 小智慧，大智慧
  105.             
  106.         
  107.         
  108.             
  109.                 
  110.                     
  111.                     
  112.                 
  113.                 童话故事里的小智慧
  114.                 小智慧，大智慧
  115.             
  116.         
  117.         
  118.             
  119.                 
  120.                     
  121.                     
  122.                 
  123.                 童话故事里的小智慧
  124.                 小智慧，大智慧
  125.             
  126.         
  127.     
</>复制代码 
  1. *index.wxss样式*
</>复制代码 
  1. /**index.wxss**/
  2. .home_back1{
  3.     width: 100%;
  4. }
  5. .home_back2{
  6.     position: fixed;
  7.     top: 0;
  8.     left: 0;
  9.     right: 0;
  10.     bottom: 0;
  11.     z-index: 10;
  12. }
  13. /* 搜索 */
  14. .home_srh {
  15.     width: 100%;
  16.     height: 74rpx;
  17.     padding-top: 20rpx;
  18.     background: #fff; 
  19.     border-bottom: 1rpx solid #e8e8e8;
  20. }
  21. .home_srh .srh_box {
  22.     width: 690rpx;
  23.     height: 54rpx;
  24.     margin: 0 auto;
  25.     box-shadow: 0 0 10rpx 2rpx #f1f1f1;
  26.     border-radius: 50rpx;
  27.     display: flex;
  28.     align-items: center;
  29. }
  30. .home_srh .srh_box .srh_box_img {
  31.     width: 24rpx;
  32.     height: 26rpx;
  33.     display: inline-block;
  34.     margin-left: 32rpx;
  35.     margin-right: 20rpx;
  36. }
  37. .home_srh .srh_box .srh_box_text {
  38.     font-size: 24rpx;
  39.     color: #999;
  40. }
  41. /* 音频分类 */
  42. /* banner图 */
  43. .home_ban{
  44.     width: 100%;
  45.     height: 422rpx;
  46.     background: #fff;
  47.     padding-top: 18rpx;
  48. }
  49. .home_ban .page-section{
  50.     width: 100%;
  51.     height: 258rpx;
  52.     position:relative;
  53.     z-index: 2;
  54. }
  55. .home_ban .page-section .swiper-item{
  56.     width: 630rpx;
  57.     height: 258rpx;
  58.     margin: 0 auto;
  59.     position: relative;
  60.     display: block;
  61. }
  62. .home_ban .page-section .swiper-item audio{
  63.     width: 630rpx;
  64.     height: 258rpx;
  65.     display: block;
  66.     background: #ccc;
  67. }
  68. .home_ban .page-section .swiper-item .audio_box {
  69.     width: 90rpx;
  70.     height: 90rpx;
  71.     position: absolute;
  72.     left: 50%;
  73.     top: 50%;
  74.     margin-left: -45rpx;
  75.     margin-top: -45rpx;
  76. }
  77. .home_ban .page-section .swiper-item .audio_box .audio_play {
  78.     width: 90rpx;
  79.     height: 90rpx;
  80.     display: block;
  81.     background: rgba(0,0,0,0);
  82. }
  83. .home_ban .page-section .swiper-item .audio_box .audio_play image{
  84.     width: 90rpx;
  85.     height: 90rpx;
  86.     display: block;
  87. }
  88. .home_ban .page-section .swiper-item .audio_next {
  89.     width: 60rpx;
  90.     height: 60rpx;
  91.     position: absolute;
  92.     top: 50%;
  93.     margin-top: -30rpx;
  94.     right: 169rpx;
  95. }
  96. .home_ban .page-section .swiper-item .audio_next image {
  97.     width: 60rpx;
  98.     height: 60rpx;
  99.     display: block;
  100. }
  101. .home_ban .page-section .swiper-item .audio_collect {
  102.     width: 60rpx;
  103.     height: 60rpx;
  104.     position: absolute;
  105.     top: 50%;
  106.     margin-top: -30rpx;
  107.     right: 169rpx;
  108. }
  109. .home_ban .page-section .swiper-item .audio_collect image {
  110.     width: 60rpx;
  111.     height: 60rpx;
  112.     display: block;
  113. }
  114. .home_ban .page-section .swiper-item .audio_collect {
  115.     width: 60rpx;
  116.     height: 60rpx;
  117.     position: absolute;
  118.     top: 50%;
  119.     margin-top: -30rpx;
  120.     left: 169rpx;
  121. }
  122. .home_ban .page-section .swiper-item .audio_collect .audio_coly {
  123.     width: 60rpx;
  124.     height: 60rpx;
  125.     display: block;
  126.     background: rgba(0,0,0,0);
  127. }
  128. .home_ban .page-section .swiper-item .audio_collect .audio_coly image {
  129.     width: 60rpx;
  130.     height: 60rpx;
  131.     display: block;
  132. }
  133. .home_ban .page-section .swiper-item .audio_text{
  134.     width: 100%;
  135.     font-size: 28rpx;
  136.     color: #fff;
  137.     text-align: center;
  138.     position: absolute;
  139.     bottom: 26rpx;
  140. }
  141. /* 音频小白点 */
  142. .audio_fre {
  143.     width: 108rpx;
  144.     height: 108rpx;
  145.     position: fixed;
  146.     z-index: 99;
  147. }
  148. .audio_fre .audio_fre1 {
  149.     width: 104rpx;
  150.     height: 104rpx;
  151.     display: block;
  152.     border-radius: 100%;
  153.     border: 2rpx solid #fff;
  154. }
  155. .audio_fre .audio_fre2 {
  156.     width: 60rpx;
  157.     height: 60rpx;
  158.     position: absolute;
  159.     top: 50%;
  160.     margin-top: -30rpx;
  161.     left: 50%;
  162.     margin-left: -30rpx;
  163. }
  164. /* 菜单分类 */
  165. .menu_ul {
  166.     width: 100%;
  167.     height: 164rpx;
  168. }
  169. .menu_ul .menu_li {
  170.     width: 33.3%;
  171.     height: 164rpx;
  172.     float: left;
  173.     text-align: center;
  174. }
  175. .menu_ul .menu_li:nth-child(1) image{
  176.     width: 78rpx;
  177.     height: 80rpx;
  178.     display: block;
  179.     margin: 0 auto;
  180.     margin-top: 23rpx;
  181. }
  182. .menu_ul .menu_li:nth-child(2) image{
  183.     width: 74rpx;
  184.     height: 97rpx;
  185.     display: block;
  186.     margin: 0 auto;
  187.     margin-top: 8rpx;
  188. }
  189. .menu_ul .menu_li:nth-child(3) image{
  190.     width: 73rpx;
  191.     height: 96rpx;
  192.     display: block;
  193.     margin: 0 auto;
  194.     margin-top: 8rpx;
  195. }
  196. .menu_ul .menu_li .menu_text{
  197.     width: 100%;
  198.     text-align: center;
  199.     font-size: 24rpx;
  200.     color: #343434;
  201.     margin-top: 10rpx;
  202. }
  203. /* 儿童故事 */
  204. .child_story {
  205.     width: 100%;
  206.     margin-top: 8rpx;
  207.     background: #fff;
  208. } 
  209. .child_story .story_ul {
  210.     padding: 0 32rpx;
  211.     padding-top: 30rpx;
  212.     overflow: hidden;
  213. }
  214. .child_story .story_ul .story_li {
  215.     width: 330rpx;
  216.     float: left;
  217.     margin-right: 26rpx;
  218.     margin-bottom: 30rpx;
  219. }
  220. .child_story .story_ul .story_li:nth-child(2n) {
  221.     margin-right: 0;
  222. }
  223. .child_story .story_ul .story_li .story_li_img {
  224.     width: 330rpx;
  225.     height: 210rpx;
  226.     border-radius: 14rpx;
  227.     position: relative;
  228.     overflow: hidden;
  229. }
  230. .child_story .story_ul .story_li .story_li_img .story_li_img1{
  231.     width: 330rpx;
  232.     height: 210rpx;
  233.     display: block;
  234. }
  235. .child_story .story_ul .story_li .story_li_img .story_li_img2{
  236.     width: 95rpx;
  237.     height: 32rpx;
  238.     display: block;
  239.     position: absolute;
  240.     top: 0;
  241.     left: 0;
  242. }
  243. .child_story .story_ul .story_li .st_li_tit {
  244.     width: 90%;
  245.     font-size: 26rpx;
  246.     color: #212121;
  247.     margin-top: 18rpx;
  248.     padding: 0 5%;
  249.     overflow: hidden;
  250.     text-overflow: ellipsis;
  251.     white-space: nowrap; 
  252.     letter-spacing: 0.4rpx;
  253. }
  254. .child_story .story_ul .story_li .st_li_sec {
  255.     width: 90%;
  256.     font-size: 18rpx;
  257.     color: #999;
  258.     margin-top: 6rpx;
  259.     padding: 0 5%;
  260.     letter-spacing: 0.2rpx;
  261. }
</>复制代码 
  1. *index.js页面*
</>复制代码 
  1. //index.js
  2. var app = getApp();
  3. Page({
  4.     /**
  5.      * 页面的初始数据
  6.      */
  7.     data: { 
  8.         adply1: true,
  9.         adply2: false,
  10.         adcol1: true,
  11.         adcol2: false,
  12.         adFre: false,
  13.         funBun: false,
  14.         curr_index: 0,
  15.         screenHeight: 0,
  16.         screenWidth: 0,
  17.         top: 65,
  18.         left: 300,
  19.         right: 0,
  20.         home_back: "home_back1"
  21.     },
  22.     /**
  23.      * 生命周期函数--监听页面加载
  24.      */
  25.     onLoad: function (options) {
  26.         //获取屏幕宽高
  27.         var that = this;
  28.         wx.getSystemInfo({
  29.             success: function (res) {
  30.                 console.log(res.windowWidth)//手机可用屏幕宽度
  31.                 console.log(res.windowHeight)//手机可用屏幕高度
  32.                 that.setData({
  33.                     screenHeight: res.windowHeight,
  34.                     screenWidth: res.windowWidth,
  35.                 });
  36.             }
  37.         });
  38.     },
  39.     /**
  40.      * 生命周期函数--监听页面初次渲染完成
  41.      */
  42.     onReady: function (e) {
  43.         let that = this;
  44.         that.audioCtx = wx.createAudioContext("myAudio")
  45.     },
  46.     /**
  47.      * 生命周期函数--监听页面显示
  48.      */
  49.     onShow: function () {
  50.     },
  51.     /**
  52.      * 生命周期函数--监听页面隐藏
  53.      */
  54.     onHide: function () {
  55.     },
  56.     /**
  57.      * 生命周期函数--监听页面卸载
  58.      */
  59.     onUnload: function () {
  60.     },
  61.     /**
  62.      * 页面相关事件处理函数--监听用户下拉动作
  63.      */
  64.     onPullDownRefresh: function () {
  65.     },
  66.     /**
  67.      * 页面上拉触底事件的处理函数
  68.      */
  69.     onReachBottom: function () {
  70.     },
  71.     /**
  72.      * 用户点击右上角分享
  73.      */
  74.     onShareAppMessage: function () {
  75.     },
  76.     /**
  77.      * 跳转搜索页面
  78.      */
  79.     srhBox: function () {
  80.         let that = this;
  81.         wx.navigateTo({
  82.             url: "../search/index",
  83.         })
  84.     },
  85.     /**
  86.      * 点击播放
  87.      */
  88.     audioPlay: function () {
  89.         var that = this;
  90.         that.audioCtx.play();
  91.         that.setData({
  92.             adply1: false,
  93.             adply2: true,
  94.             adFre: true,
  95.             // isScroll: that.data.isScroll
  96.         })
  97.     },
  98.     /**
  99.      * 点击暂停
  100.      */
  101.     audioPause: function () {
  102.         var that = this;
  103.         that.audioCtx.pause();
  104.         that.setData({
  105.             adply1: true,
  106.             adply2: false,
  107.             adFre: false,
  108.             // isScroll: that.data.isScroll
  109.         })
  110.     },  
  111.     /**
  112.     * 点击收藏
  113.     */
  114.     audioColy: function () {
  115.         var that = this;
  116.         that.setData({
  117.             adcol1: false,
  118.             adcol2: true,
  119.         })
  120.     },
  121.     /**
  122.      * 点击未收藏
  123.      */
  124.     audioColn: function () {
  125.         var that = this;
  126.         that.setData({
  127.             adcol1: true,
  128.             adcol2: false,
  129.         })
  130.     },  
  131.     /**
  132.      * 跳转故事详情
  133.      */
  134.     storySec: function () {
  135.         let that = this;
  136.         wx.navigateTo({
  137.             url: "../audio/index",
  138.         })
  139.     },
  140.     /**
  141.      * 点击切换
  142.      */
  143.     menuLi: function (e) {
  144.         let that = this;
  145.         // console.log (e);
  146.         let id = e.currentTarget.id;
  147.         that.setData({
  148.             curr_index: id
  149.         })
  150.     },
  151.     /**
  152.      * 音频小白点滑动
  153.      */
  154.     //滑动移动事件
  155.     handletouchmove: function (e) {
  156.         let that = this;
  157.         let clientX = e.touches[0].clientX;
  158.         let clientY = e.touches[0].clientY;
  159.         //屏幕边界判断
  160.         if (clientX < 20 || clientY < 20)
  161.             return;
  162.         if (clientX > that.data.screenWidth - 20)
  163.             return;
  164.         if (clientY > that.data.screenHeight - 20)
  165.             return;
  166.         that.setData({
  167.             left: e.touches[0].clientX - 20,
  168.             top: e.touches[0].clientY - 20,
  169.             right: e.touches[0].clientX - 20,
  170.             home_back: "home_back2"
  171.         })
  172.     },
  173.     //滑动结束事件
  174.     handletouchend: function (e) {
  175.         let that = this;
  176.         if ( that.data.left < (that.data.screenWidth - 60) / 2 ) {
  177.             that.setData({
  178.                 left: 0,
  179.                 home_back: "home_back1"
  180.             })
  181.         } else {
  182.             that.setData({
  183.                 left: that.data.screenWidth - 60,
  184.                 right: 0,
  185.                 home_back: "home_back1"
  186.             })
  187.         }
  188.     }
  189. })
GPU云服务器 云服务器 做一个小程序 如何做一个小程序 怎么用小程序 怎样用小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114002.html

相关文章

  • 用小程序做一个类似于苹果AssistiveTouch功能

    摘要：二我们做这个功能，第二步就是要想思路思路就是，利用微信中的滑动事件，外加控制样式，来完成这个功能。三这是项目的图，废话不多说，直接撸代码。 一、首先我先介绍一下，我们要做一个什么样的项目功能 项目功能就是一个音频点击播放，当点击为播放的状态时，一个音频的动图出现，而且是可以跟随着手指的滑动而滑动，而且，在滑动动图的时候，当前下的页面是不可以跟随着我的滑动而上下滚动，当停止滑动的时...

    fxp 评论0 收藏0

  • 用小程序·云开发两天搭建mini论坛丨实战

    摘要：笔者最近涉猎了小程序相关的知识，于是利用周末时间开发了一款类似于同事的小程序，深度体验了小程序云开发模式提供的云函数数据库存储三大能力。 笔者最近涉猎了小程序相关的知识，于是利用周末时间开发了一款类似于同事的小程序，深度体验了小程序云开发模式提供的云函数、数据库、存储三大能力。关于云开发，可参考文档：小程序·云开发。 个人感觉云开发带来的最大好处是鉴权流程的简化和对后端的弱化，所以像笔...

    沈建明 评论0 收藏0

  • 清爽即正义，简洁即真理—lingvist

    摘要：我会努力学习下去，也希望看到这篇文章的人能坚持下去，大牛大佬大神，宁有种乎。清爽即正义，简洁即真理。伪元素十分适合做这种类似符号的东西。我自己的诸君加油，大神大牛大佬，宁有种乎。保持学习，一直学习朱某人敬上 前言 从11月开始学前端。在这之前连代码都没有碰过。掘金有很多的大牛分享自己对代码的理解，都很高屋建瓴，但是没有真正属于我们这些，还在新手村彷徨的人的代入感。这篇文章技术性可能不强...

    fasss 评论0 收藏0

  • 清爽即正义，简洁即真理—lingvist

    摘要：我会努力学习下去，也希望看到这篇文章的人能坚持下去，大牛大佬大神，宁有种乎。清爽即正义，简洁即真理。伪元素十分适合做这种类似符号的东西。我自己的诸君加油，大神大牛大佬，宁有种乎。保持学习，一直学习朱某人敬上 前言 从11月开始学前端。在这之前连代码都没有碰过。掘金有很多的大牛分享自己对代码的理解，都很高屋建瓴，但是没有真正属于我们这些，还在新手村彷徨的人的代入感。这篇文章技术性可能不强...

    beanlam 评论0 收藏0

发表评论

登陆后可评论

0条评论

MarvinZhang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<