本篇文章给大家带来的内容是关于小程序实现类似于苹果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,电脑产品信息等等,方便需要大家查阅数码产品最新情况,了解产品特性,能够进行对比选择最具性价比的商品。