小程序实现类似于苹果AssistiveTouch功能（附代码）

小程序实现类似于苹果AssistiveTouch功能（附代码）

本篇文章给大家带来的内容是关于小程序实现类似于苹果AssistiveTouch功能（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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

思路就是，利用微信中的滑动事件，外加控制css样式，来完成这个功能。

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

项目样图

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

*index.wxml页面*

开心奶奶 开心奶奶——小小探险家 开心奶奶——小小探险家 ----------> 重点！！！！ ---------- 推荐故事 男孩 女孩 童话故事里的小智慧 小智慧，大智慧 童话故事里的小智慧 小智慧，大智慧 童话故事里的小智慧 小智慧，大智慧 -

*index.wxss样式*

/**index.wxss**/.home_back1{ width: 100%;}.home_back2{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10;}/* 搜索 */.home_srh { width: 100%; height: 74rpx; padding-top: 20rpx; background: #fff; border-bottom: 1rpx solid #e8e8e8;}.home_srh .srh_box { width: 690rpx; height: 54rpx; margin: 0 auto; box-shadow: 0 0 10rpx 2rpx #f1f1f1; border-radius: 50rpx; display: flex; align-items: center;}.home_srh .srh_box .srh_box_img { width: 24rpx; height: 26rpx; display: inline-block; margin-left: 32rpx; margin-right: 20rpx;}.home_srh .srh_box .srh_box_text { font-size: 24rpx; color: #999;}/* 音频分类 *//* banner图 */.home_ban{ width: 100%; height: 422rpx; background: #fff; padding-top: 18rpx;}.home_ban .page-section{ width: 100%; height: 258rpx; position:relative; z-index: 2;}.home_ban .page-section .swiper-item{ width: 630rpx; height: 258rpx; margin: 0 auto; position: relative; display: block;}.home_ban .page-section .swiper-item audio{ width: 630rpx; height: 258rpx; display: block; background: #ccc;}.home_ban .page-section .swiper-item .audio_box { width: 90rpx; height: 90rpx; position: absolute; left: 50%; top: 50%; margin-left: -45rpx; margin-top: -45rpx;}.home_ban .page-section .swiper-item .audio_box .audio_play { width: 90rpx; height: 90rpx; display: block; background: rgba(0,0,0,0);}.home_ban .page-section .swiper-item .audio_box .audio_play image{ width: 90rpx; height: 90rpx; display: block;}.home_ban .page-section .swiper-item .audio_next { width: 60rpx; height: 60rpx; position: absolute; top: 50%; margin-top: -30rpx; right: 169rpx;}.home_ban .page-section .swiper-item .audio_next image { width: 60rpx; height: 60rpx; display: block;}.home_ban .page-section .swiper-item .audio_collect { width: 60rpx; height: 60rpx; position: absolute; top: 50%; margin-top: -30rpx; right: 169rpx;}.home_ban .page-section .swiper-item .audio_collect image { width: 60rpx; height: 60rpx; display: block;}.home_ban .page-section .swiper-item .audio_collect { width: 60rpx; height: 60rpx; position: absolute; top: 50%; margin-top: -30rpx; left: 169rpx;}.home_ban .page-section .swiper-item .audio_collect .audio_coly { width: 60rpx; height: 60rpx; display: block; background: rgba(0,0,0,0);}.home_ban .page-section .swiper-item .audio_collect .audio_coly image { width: 60rpx; height: 60rpx; display: block;}.home_ban .page-section .swiper-item .audio_text{ width: 100%; font-size: 28rpx; color: #fff; text-align: center; position: absolute; bottom: 26rpx;}/* 音频小白点 */.audio_fre { width: 108rpx; height: 108rpx; position: fixed; z-index: 99;}.audio_fre .audio_fre1 { width: 104rpx; height: 104rpx; display: block; border-radius: 100%; border: 2rpx solid #fff;}.audio_fre .audio_fre2 { width: 60rpx; height: 60rpx; position: absolute; top: 50%; margin-top: -30rpx; left: 50%; margin-left: -30rpx;}/* 菜单分类 */.menu_ul { width: 100%; height: 164rpx;}.menu_ul .menu_li { width: 33.3%; height: 164rpx; float: left; text-align: center;}.menu_ul .menu_li:nth-child(1) image{ width: 78rpx; height: 80rpx; display: block; margin: 0 auto; margin-top: 23rpx;}.menu_ul .menu_li:nth-child(2) image{ width: 74rpx; height: 97rpx; display: block; margin: 0 auto; margin-top: 8rpx;}.menu_ul .menu_li:nth-child(3) image{ width: 73rpx; height: 96rpx; display: block; margin: 0 auto; margin-top: 8rpx;}.menu_ul .menu_li .menu_text{ width: 100%; text-align: center; font-size: 24rpx; color: #343434; margin-top: 10rpx;}/* 儿童故事 */.child_story { width: 100%; margin-top: 8rpx; background: #fff;} .child_story .story_ul { padding: 0 32rpx; padding-top: 30rpx; overflow: hidden;}.child_story .story_ul .story_li { width: 330rpx; float: left; margin-right: 26rpx; margin-bottom: 30rpx;}.child_story .story_ul .story_li:nth-child(2n) { margin-right: 0;}.child_story .story_ul .story_li .story_li_img { width: 330rpx; height: 210rpx; border-radius: 14rpx; position: relative; overflow: hidden;}.child_story .story_ul .story_li .story_li_img .story_li_img1{ width: 330rpx; height: 210rpx; display: block;}.child_story .story_ul .story_li .story_li_img .story_li_img2{ width: 95rpx; height: 32rpx; display: block; position: absolute; top: 0; left: 0;}.child_story .story_ul .story_li .st_li_tit { width: 90%; font-size: 26rpx; color: #212121; margin-top: 18rpx; padding: 0 5%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.4rpx;}.child_story .story_ul .story_li .st_li_sec { width: 90%; font-size: 18rpx; color: #999; margin-top: 6rpx; padding: 0 5%; letter-spacing: 0.2rpx;}-

*index.js页面*

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。