溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下小程序實現類似于蘋果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='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>*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頁面*
//index.js
var app = getApp();
Page({
/**
* 頁面的初始數據
*/
data: {
adply1: true,
adply2: false,
adcol1: true,
adcol2: false,
adFre: false,
funBun: false,
curr_index: 0,
screenHeight: 0,
screenWidth: 0,
top: 65,
left: 300,
right: 0,
home_back: 'home_back1'
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
//獲取屏幕寬高
var that = this;
wx.getSystemInfo({
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',
})
},
/**
* 點擊播放
*/
audioPlay: function () {
var that = this;
that.audioCtx.play();
that.setData({
adply1: false,
adply2: true,
adFre: true,
// isScroll: that.data.isScroll
})
},
/**
* 點擊暫停
*/
audioPause: function () {
var that = this;
that.audioCtx.pause();
that.setData({
adply1: true,
adply2: false,
adFre: false,
// isScroll: that.data.isScroll
})
},
/**
* 點擊收藏
*/
audioColy: function () {
var that = this;
that.setData({
adcol1: false,
adcol2: true,
})
},
/**
* 點擊未收藏
*/
audioColn: function () {
var that = this;
that.setData({
adcol1: true,
adcol2: false,
})
},
/**
* 跳轉故事詳情
*/
storySec: function () {
let that = this;
wx.navigateTo({
url: '../audio/index',
})
},
/**
* 點擊切換
*/
menuLi: function (e) {
let that = this;
// console.log (e);
let id = e.currentTarget.id;
that.setData({
curr_index: id
})
},
/**
* 音頻小白點滑動
*/
//滑動移動事件
handletouchmove: function (e) {
let that = this;
let clientX = e.touches[0].clientX;
let clientY = e.touches[0].clientY;
//屏幕邊界判斷
if (clientX < 20 || clientY < 20)
return;
if (clientX > that.data.screenWidth - 20)
return;
if (clientY > that.data.screenHeight - 20)
return;
that.setData({
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 < (that.data.screenWidth - 60) / 2 ) {
that.setData({
left: 0,
home_back: 'home_back1'
})
} else {
that.setData({
left: that.data.screenWidth - 60,
right: 0,
home_back: 'home_back1'
})
}
}
})以上是“小程序實現類似于蘋果AssistiveTouch功能的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
