Use a small program to do a function similar to Apple assistive touch

Time:2020-10-16

1、 First of all, I would like to introduce what kind of project functions we want to make

The project function is an audio Click to play. When the click is in play state, an audio motion picture will appear, and it can slide along with the sliding of fingers. Moreover, when the moving picture is sliding, the current page can't scroll up and down with my slide. When the slide stops, the audio animation is docked on the left or right side of the mobile phone The front and bottom pages can be scrolled up and down. Here is the introduction of the functions. Let's talk about the ideas.

2、 We do this function, the second step is to think about ideas

The idea is to use the sliding events in wechat and control the CSS style to complete this function.

3、 This is the UI diagram of the project. Let’s not say much nonsense. Just code.

Project sample drawing

Use a small program to do a function similar to Apple assistive touch
Use a small program to do a function similar to Apple assistive touch
Use a small program to do a function similar to Apple assistive touch

4 index.wxml , index.wxss , index.js Page code

* index.wxml Page*
<! -- search -- >

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

    <! -- audio classification -- >

    <view class='home_ban'>

        <! -- rotation chart -- >
        <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 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 '> happy granny - little Explorer < / View >
                </view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item">
                    <audio 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 '> happy granny - little Explorer < / View >
                </view>
            </swiper-item>
            <!-- </block> -->
            </swiper>

        </view>
        
        


----------

>Key points!!!!


        <! -- Audio animation -- >
        <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>


----------


        <! -- Classification -- >
        <view class='menu_ul'>
            <view class='menu_li' id="0" bindtap='menuLi'>
                <image src='../../img/recom.png'></image>
                <view class='menu_ Text '> recommended stories < / View >
            </view>
            <view class='menu_li' id="1" bindtap='menuLi'>
                <image src='../../img/boy_icon.png'></image>
                <view class='menu_ Text '> boys < / View >
            </view>
            <view class='menu_li' id="2" bindtap='menuLi'>
                <image src='../../img/girl_icon.png'></image>
                <view class='menu_ Text '> girls < / View >
            </view>
        </view>

    </view>

    Children's stories
    <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_ Little wisdom in fairy tales
                <view class='st_ Li_ SEC '> small wisdom, big wisdom < / 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_ Little wisdom in fairy tales
                <view class='st_ Li_ SEC '> small wisdom, big wisdom < / 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_ Little wisdom in fairy tales
                <view class='st_ Li_ SEC '> small wisdom, big wisdom < / View >
            </view>
        </view>
    </view>
* index.wxss Style*
/**index.wxss**/

.home_back1{
    width: 100%;
}

.home_back2{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

/*Search*/
.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;
}

/*Audio classification*/

/*Banner graph*/
.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 dot*/

.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 classification*/
.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;
}

/*Children's stories*/
.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 Page*
//index.js
var app = getApp();
Page({

    /**
     *Initial data of the 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'
    },

    /**
     *Life cycle function -- listening for page loading
     */
    onLoad: function (options) {
        //Get screen width
        var that = this;
        wx.getSystemInfo({
            success: function (res) {
                console.log ( res.windowWidth )//Available screen width
                console.log ( res.windowHeight )//Available screen height of mobile phone
                that.setData({
                    screenHeight: res.windowHeight,
                    screenWidth: res.windowWidth,
                });
            }
        });
    },

    /**
     *Life cycle function -- monitor the completion of the first rendering of the page
     */
    onReady: function (e) {
        let that = this;
        that.audioCtx = wx.createAudioContext('myAudio')
    },

    /**
     *Life cycle function -- listening page display
     */
    onShow: function () {

    },

    /**
     *Life cycle function -- listening page hidden
     */
    onHide: function () {

    },

    /**
     *Life cycle function -- listening page unloading
     */
    onUnload: function () {

    },

    /**
     *Page related event handling function -- listening to user pull-down actions
     */
    onPullDownRefresh: function () {

    },

    /**
     *Handle function of bottom pull event on page
     */
    onReachBottom: function () {

    },

    /**
     *Users click on the upper right corner to share
     */
    onShareAppMessage: function () {

    },

    /**
     *Jump to search page
     */
    srhBox: function () {
        let that = this;
        wx.navigateTo({
            url: '../search/index',
        })
    },


    /**
     *Click play
     */
    audioPlay: function () {
        var that = this;
        that.audioCtx.play();
        that.setData({
            adply1: false,
            adply2: true,
            adFre: true,
            // isScroll: that.data.isScroll
        })
    },

    /**
     *Click pause
     */
    audioPause: function () {
        var that = this;
        that.audioCtx.pause();
        that.setData({
            adply1: true,
            adply2: false,
            adFre: false,
            // isScroll: that.data.isScroll
        })
    },  

    /**
    *Click collection
    */
    audioColy: function () {
        var that = this;
        that.setData({
            adcol1: false,
            adcol2: true,
        })
    },

    /**
     *Click not collected
     */
    audioColn: function () {
        var that = this;
        that.setData({
            adcol1: true,
            adcol2: false,
        })
    },  

    /**
     *Jump story details
     */

    storySec: function () {
        let that = this;
        wx.navigateTo({
            url: '../audio/index',
        })
    },

    /**
     *Click to switch
     */

    menuLi: function (e) {
        let that = this;
        // console.log (e);
        let id = e.currentTarget.id;

        that.setData({
            curr_index: id
        })
    },

    /**
     *Audio small white dot sliding
     */

    //Slide move event
    handletouchmove: function (e) {
        let that = this;
        let clientX = e.touches[0].clientX;
        let clientY = e.touches[0].clientY;
        //Screen boundary judgment
        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'
        })

    },

    //Slide end event
    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'
            })
        }
    }



})

Recommended Today

Centos8 deploy nextcloud network disk

Nextcloud is an open source storage software. It has rich functions and supports multiple people to work together. Currently, it is completely free. Official website: https://www.nextcloud.com Architecture: lamp or LNMP This paper is based on lamp Note: the minimum version of PHP is 7.2   Shut down SELinux: 1. Temporary shutdown: setenforce 0: temporary shutdown, […]