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

本篇文章给大家带来的内容是关于小程序实现类似于苹果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=&
#39;../../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='st_li_tit b'>童话故事里的小智慧</view>                <view class='st_li_sec'>小智慧，大智慧</view>            </view>        </view>        <view class='story_ul' wx:if="{{curr_index == 1}}">            <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='st_li_tit b'>童话故事里的小智慧</view>                <view class='st_li_sec'>小智慧，大智慧</view>            </view>        </view>        <view class='story_ul' wx:if="{{curr_index == 2}}">            <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='st_li_tit b'>童话故事里的小智慧</view>                <view class='st_li_sec'>小智慧，大智慧</view>            </view>        </view>    </view>              
              

            
小程序,iphone,svn,html,css