黔优媒体网-软文媒体自助发稿平台!
  1. 行业资讯
  2. 正文

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

来源:黔优媒体网   时间:2024-09-19

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

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

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

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

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

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

项目样图


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

*index.wxml页面*

 !-- 搜索 -- 
     view 
         view 
             image /image 
             view 开心奶奶 /view 
         /view 
     /view 
     !-- 音频分类 -- 
     view 
         !-- 轮播图 -- 
         view 
         swiper 
             !-- block wx:for= {{}} wx:key= -- 
             swiper-item 
                 view 
                     audio /audio 
                     view 
                         button 
                             image /image 
                         /button 
                         button 
                             image /image 
                         /button 
                     /view 
                     view 
                         image /image 
                     /view 
                     view 
                         button 
                             image /image 
                         /button 
                         button 
                             image /image 
                         /button 
                     /view 
                     view 开心奶奶——小小探险家 /view 
                 /view 
             /swiper-item 
             swiper-item 
                 view 
                     audio /audio 
                     view 
                         button 
                             image /image 
                         /button 
                         button 
                             image /image 
                         /button 
                     /view 
                     view 
                         image /image 
                     /view 
                     view 
                         button 
                             image /image 
                         /button 
                         button 
                             image /image 
                         /button 
                     /view 
                     view 开心奶奶——小小探险家 /view 
                 /view 
             /swiper-item 
             !-- /block -- 
             /swiper 
         /view 
----------
  重点!!!!

                 view 童话故事里的小智慧 /view                  view 小智慧,大智慧 /view              /view          /view          view              view                  view                      image /image                      !-- image >

*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;

            success: function (res) {                 console.log(res.windowWidth)//手机可用屏幕宽度                 console.log(res.windowHeight)//手机可用屏幕高度                 that.setData({                     screenHeight: res.windowHeight,                     screenWidth: res.windowWidth,                 });             }         });     },     /**      * 生命周期函数--监听页面初次渲染完成      */     onReady: function (e) {         let that = this;         that.audioCtx = wx.createAudioContext('myAudio')     },     /**      * 生命周期函数--监听页面显示      */     onShow: function () {     },     /**      * 生命周期函数--监听页面隐藏      */     onHide: function () {     },     /**      * 生命周期函数--监听页面卸载      */     onUnload: function () {     },     /**      * 页面相关事件处理函数--监听用户下拉动作      */     onPullDownRefresh: function () {     },     /**      * 页面上拉触底事件的处理函数      */     onReachBottom: function () {     },     /**      * 用户点击右上角分享      */     onShareAppMessage: function () {     },     /**      * 跳转搜索页面      */     srhBox: function () {         let that = this;         wx.navigateTo({             url: '../search/index',         })     },

            left: e.touches[0].clientX - 20,             top: e.touches[0].clientY - 20,             right: e.touches[0].clientX - 20,             home_back: 'home_back2'         })     },     //滑动结束事件     handletouchend: function (e) {         let that = this;         if ( that.data.left  p >

以上就是小程序实现类似于苹果AssistiveTouch功能(附代码)的详细内容,更多请关注php中文网其它相关文章!

数码产品性能查询

该软件包括了市面上所有手机CPU,手机跑分情况,电脑CPU,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。


【免责申明】黔优媒体网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优媒体网官方立场,请读者仅做参考,本文标题:小程序实现类似于苹果AssistiveTouch功能(附代码);欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法/违规的内容,请您立即联系我们及时修正或删除。(邮箱号: kefu@qianu.com)