匿名通过本文主要向大家介绍了小程序,iphone,svn,html,css等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本篇文章给大家带来的内容是关于小程序实现类似于苹果AssistiveTouch功能（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、首先我先介绍一下，我们要做一个什么样的项目功能
项目功能就是一个音频点击播放，当点击为播放的状态时，一个音频的动图出现，而且是可以跟随着手指的滑动而滑动，而且，在滑动动图的时候，当前下的页面是不可以跟随着我的滑动而上下滚动，当停止滑动的时候，音频动图停靠在手机的左侧或者右侧，而当前下的页面是可以上下滚动的，功能介绍到此为止，下面我们说一下思路。
二、我们做这个功能，第二步就是要想思路
思路就是，利用微信中的滑动事件，外加控制css样式，来完成这个功能。
三、这是项目的ui图，废话不多说，直接撸代码。
项目样图
四、index.wxml、index.wxss、index.js页面代码
*index.wxml页面*
<!-- 搜索 -->
<view class='home_srh'>
<view class='srh_box' bindtap='srhBox'>
<image class='srh_box_img' src='../../img/home_search.png'></image>
<view class='srh_box_text'>开心奶奶</view>
</view>
</view>
<!-- 音频分类 -->
<view class='home_ban'>
<!-- 轮播图 -->
<view class="page-section">
<swiper circular="true" previous-margin="44rpx" next-margin="44rpx">
<!-- <block wx:for="{{}}" wx:key=""> -->
<swiper-item>
<view class="swiper-item">
<audio src="http://img.tukuppt.com/preview_music/00/00/60/yulan-5b87c00c59d402663.mp3" id="myAudio" loop></audio>
<view class='audio_box'>
<button bindtap='audioPlay' wx:if="{{adply1}}" class='audio_play'>
<image src='../../img/home_adplay.png' ></image>
</button>
<button bindtap='audioPause' wx:if="{{adply2}}" class='audio_play'>
<image src='../../img/home_adstop.png' ></image>
</button>
</view>
<view class='audio_next'>
<image src='../../img/audio_next.png'></image>
</view>
<view class='audio_collect'>
<button bindtap='audioColy' wx:if="{{adcol1}}" class='audio_coly'>
<image src='../../img/audio_nocollect.png'></image>
</button>
<button bindtap='audioColn' wx:if="{{adcol2}}" class='audio_coly'>
<image src='../../img/audio_collect.png'></image>
</button>
</view>
<view class='audio_text'>开心奶奶——小小探险家</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<audio src="http://img.tukuppt.com/preview_music/00/00/60/yulan-5b87c00c59d402663.mp3" id="myAudio" loop></audio>
<view class='audio_box'>
<button bindtap='audioPlay' wx:if="{{adply1}}" class='audio_play'>
<image src='../../img/home_adplay.png' ></image>
</button>
<button bindtap='audioPause' wx:if="{{adply2}}" class='audio_play'>
<image src='../../img/home_adstop.png' ></image>
</button>
</view>
<view class='audio_next'>
<image src='../../img/audio_next.png'></image>
</view>
<view class='audio_collect'>
<button bindtap='audioColy' wx:if="{{adcol1}}" class='audio_coly'>
<image src='../../img/audio_nocollect.png'></image>
</button>
<button bindtap='audioColn' wx:if="{{adcol2}}" class='audio_coly'>
<image src='../../img/audio_collect.png'></image>
</button>
</view>
<view class='audio_text'>开心奶奶——小小探险家</view>
</view>
</swiper-item>
<!-- </block> -->
</swiper>
</view>
----------
> 重点！！！！
<!-- 音频动图 -->
<view class='{{ home_back }}' catchtouchmove='true' >
<view class='audio_fre' wx:if="{{ adFre }}" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "top:{{top}}px; left: {{left}}px; right: {{right}}px">
<image class='audio_fre1' src='../../img/audio_back.png'></image>
<image class='audio_fre2' src='../../img/audio_fre.gif'></image>
</view>
</view>
----------
<!-- 分类 -->
<view class='menu_ul'>
<view class='menu_li' id="0" bindtap='menuLi'>
<image src='../../img/recom.png'></image>
<view class='menu_text'>推荐故事</view>
</view>
<view class='menu_li' id="1" bindtap='menuLi'>
<image src='../../img/boy_icon.png'></image>
<view class='menu_text'>男孩</view>
</view>
<view class='menu_li' id="2" bindtap='menuLi'>
<image src='../../img/girl_icon.png'></image>
<view class='menu_text'>女孩</view>
</view>
</view>
</view>
<!-- 儿童故事 -->
<view class='child_story'>
<view class='story_ul' wx:if="{{curr_index == 0}}">
<view class='story_li' bindtap='storySec'>
<view class='story_li_img'>
<image class='story_li_img1' src='../../img/weekend-first.png'></image>
<image class='story_li_img2' src='../../img/pay_icon.png'></image>
</view>
<view class=