国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用小程序做一個類似于蘋果AssistiveTouch功能

MarvinZhang / 2667人閱讀

摘要：二我們做這個功能，第二步就是要想思路思路就是，利用微信中的滑動事件，外加控制樣式，來完成這個功能。三這是項目的圖，廢話不多說，直接擼代碼。

一、首先我先介紹一下，我們要做一個什么樣的項目功能

   項目功能就是一個音頻點擊播放，當(dāng)點擊為播放的狀態(tài)時，一個音頻的動圖出現(xiàn)，而且是可以跟隨著手指的滑動而滑動，而且，在滑動動圖的時候，當(dāng)前下的頁面是不可以跟隨著我的滑動而上下滾動，當(dāng)停止滑動的時候，音頻動圖停靠在手機的左側(cè)或者右側(cè)，而當(dāng)前下的頁面是可以上下滾動的，功能介紹到此為止，下面我們說一下思路。

二、我們做這個功能，第二步就是要想思路

思路就是，利用微信中的滑動事件，外加控制css樣式，來完成這個功能。

三、這是項目的ui圖，廢話不多說，直接擼代碼。

項目樣圖



四、index.wxml、index.wxss、index.js頁面代碼

*index.wxml頁面*


    
        
            
            開心奶奶
        
    

    

    

        
        
        
            
            
                
                    
                    
                        
                        
                    
                    
                        
                    
                    
                        
                        
                    
                    開心奶奶——小小探險家
                
            
            
                
                    
                    
                        
                        
                    
                    
                        
                    
                    
                        
                        
                    
                    開心奶奶——小小探險家
                
            
            
            

        
        
        


----------

> 重點！！！！


        
        
            
                
                
            
        


----------


        
        
            
                
                推薦故事
            
            
                
                男孩
            
            
                
                女孩
            
        

    

    
    
        
            
                
                    
                    
                
                童話故事里的小智慧
                小智慧，大智慧
            
        
        
            
                
                    
                    
                
                童話故事里的小智慧
                小智慧，大智慧
            
        
        
            
                
                    
                    
                
                童話故事里的小智慧
                小智慧，大智慧
            
        
    
*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({

    /**
     * 頁面的初始數(shù)據(jù)
     */
    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"
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    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,
                });
            }
        });
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
     */
    onReady: function (e) {
        let that = this;
        that.audioCtx = wx.createAudioContext("myAudio")
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面顯示
     */
    onShow: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面隱藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面卸載
     */
    onUnload: function () {

    },

    /**
     * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 頁面上拉觸底事件的處理函數(shù)
     */
    onReachBottom: function () {

    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {

    },

    /**
     * 跳轉(zhuǎn)搜索頁面
     */
    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,
        })
    },  

    /**
     * 跳轉(zhuǎn)故事詳情
     */

    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"
        })

    },

    //滑動結(jié)束事件
    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"
            })
        }
    }



})

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114002.html

相關(guān)文章

  • 用小程序做一個類似于蘋果AssistiveTouch功能

    摘要：二我們做這個功能，第二步就是要想思路思路就是，利用微信中的滑動事件，外加控制樣式，來完成這個功能。三這是項目的圖，廢話不多說，直接擼代碼。 一、首先我先介紹一下，我們要做一個什么樣的項目功能 項目功能就是一個音頻點擊播放，當(dāng)點擊為播放的狀態(tài)時，一個音頻的動圖出現(xiàn)，而且是可以跟隨著手指的滑動而滑動，而且，在滑動動圖的時候，當(dāng)前下的頁面是不可以跟隨著我的滑動而上下滾動，當(dāng)停止滑動的時...

    fxp 評論0 收藏0

  • 用小程序·云開發(fā)兩天搭建mini論壇丨實戰(zhàn)

    摘要：筆者最近涉獵了小程序相關(guān)的知識，于是利用周末時間開發(fā)了一款類似于同事的小程序，深度體驗了小程序云開發(fā)模式提供的云函數(shù)數(shù)據(jù)庫存儲三大能力。 筆者最近涉獵了小程序相關(guān)的知識，于是利用周末時間開發(fā)了一款類似于同事的小程序，深度體驗了小程序云開發(fā)模式提供的云函數(shù)、數(shù)據(jù)庫、存儲三大能力。關(guān)于云開發(fā)，可參考文檔：小程序·云開發(fā)。 個人感覺云開發(fā)帶來的最大好處是鑒權(quán)流程的簡化和對后端的弱化，所以像筆...

    沈建明 評論0 收藏0

  • 清爽即正義，簡潔即真理—lingvist

    摘要：我會努力學(xué)習(xí)下去，也希望看到這篇文章的人能堅持下去，大牛大佬大神，寧有種乎。清爽即正義，簡潔即真理。偽元素十分適合做這種類似符號的東西。我自己的諸君加油，大神大牛大佬，寧有種乎。保持學(xué)習(xí)，一直學(xué)習(xí)朱某人敬上 前言 從11月開始學(xué)前端。在這之前連代碼都沒有碰過。掘金有很多的大牛分享自己對代碼的理解，都很高屋建瓴，但是沒有真正屬于我們這些，還在新手村彷徨的人的代入感。這篇文章技術(shù)性可能不強...

    fasss 評論0 收藏0

  • 清爽即正義，簡潔即真理—lingvist

    摘要：我會努力學(xué)習(xí)下去，也希望看到這篇文章的人能堅持下去，大牛大佬大神，寧有種乎。清爽即正義，簡潔即真理。偽元素十分適合做這種類似符號的東西。我自己的諸君加油，大神大牛大佬，寧有種乎。保持學(xué)習(xí)，一直學(xué)習(xí)朱某人敬上 前言 從11月開始學(xué)前端。在這之前連代碼都沒有碰過。掘金有很多的大牛分享自己對代碼的理解，都很高屋建瓴，但是沒有真正屬于我們這些，還在新手村彷徨的人的代入感。這篇文章技術(shù)性可能不強...

    beanlam 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<