简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 위챗 애플릿 > 미니 프로그램 개발 > 본문

미니 프로그램은 Apple의 AssistiveTouch와 유사한 기능을 구현합니다(코드 첨부).

不言
풀어 주다： 2018-10-15 14:06:27
앞으로
3755명이 탐색했습니다.

이 글의 내용은 Apple의 AssistiveTouch 기능(코드 포함)과 유사한 작은 프로그램의 구현에 관한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 먼저 우리가 하고 싶은 프로젝트 기능이 무엇인지 소개하겠습니다.

프로젝트 기능은 오디오 클릭으로 재생되는 상태에서 오디오 애니메이션이 나오며, 따라하시면 ​​됩니다. 손가락으로 슬라이드하고 애니메이션을 슬라이드할 때 현재 페이지가 슬라이딩을 따라 위아래로 스크롤할 수 없습니다. 슬라이딩을 멈추면 오디오 애니메이션이 전화기의 왼쪽이나 오른쪽에 도킹되고 현재 페이지가 아래에서 기능 소개를 마치겠습니다.

둘째, 이 기능을 만들 때 두 번째 단계는 아이디어를 생각하는 것입니다.

아이디어는 WeChat의 슬라이딩 이벤트를 사용하고 CSS 스타일을 제어하여 이 기능을 완성하는 것입니다.

3. 이것은 프로젝트의 UI 다이어그램입니다. 더 이상 고민하지 않고 바로 코드로 넘어가겠습니다.

프로젝트 샘플 사진

미니 프로그램은 Apple의 AssistiveTouch와 유사한 기능을 구현합니다(코드 첨부).
미니 프로그램은 Apple의 AssistiveTouch와 유사한 기능을 구현합니다(코드 첨부).

미니 프로그램은 Apple의 AssistiveTouch와 유사한 기능을 구현합니다(코드 첨부).

Four.index.wxml, index.wxss, index.js 페이지 코드

*index.wxml 페이지*

rreee

* index.wxss 스타일*

<!-- 搜索 -->

    <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>
                <image></image>
                <image></image>
            </view>
        </view>


----------


        <!-- 分类 -->
        <view>
            <view>
                <image></image>
                <view>推荐故事</view>
            </view>
            <view>
                <image></image>
                <view>男孩</view>
            </view>
            <view>
                <image></image>
                <view>女孩</view>
            </view>
        </view>

    </view>

    <!-- 儿童故事 -->
    <view>
        <view>
            <view>
                <view>
                    <image></image>
                    <image></image>
                </view>
                <view>童话故事里的小智慧</view>
                <view>小智慧，大智慧</view>
            </view>
        </view>
        <view>
            <view>
                <view>
                    <image></image>
                    <!-- <image class=&#39;story_li_img2&#39; src=&#39;../../img/pay_icon.png&#39;></image> -->
                </view>
                <view>童话故事里的小智慧</view>
                <view>小智慧，大智慧</view>
            </view>
        </view>
        <view>
            <view>
                <view>
                    <image></image>
                    <image></image>
                </view>
                <view>童话故事里的小智慧</view>
                <view>小智慧，大智慧</view>
            </view>
        </view>
    </view>
로그인 후 복사

*index.js 페이지*

/**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;
}
로그인 후 복사

위 내용은 미니 프로그램은 Apple의 AssistiveTouch와 유사한 기능을 구현합니다(코드 첨부).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css html iphone svn 小程序
원천：segmentfault.com
이전 기사：WeChat 애플릿 인증 코드를 구현하는 방법은 무엇입니까? (소스 코드) 다음 기사：미니 프로그램에서 npm 패키지를 사용하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
흰색으로 설정된 HR 태그가 반투명한 이유는 무엇입니까? 나는 HTML(부트스트랩 포함)과 CSS를 가지고 있습니다. 내 HTML에는 클래스가 있는 <hr> 태그가 있고 CSS에는 테두리 스타일이 있습니다. ...
에서 2024-04-06 16:13:26
0
1
500
React를 사용하여 Go 서버에서 쿠키 데이터를 가져올 수 없습니다 React 이후 백엔드로 이동하기 시작했고 백엔드 서버에 githubOAUTH와 세션을 추가하여 데이터를 저장했습니다. 모두 백엔드에서 잘 작동하며 세션 등을 통...
에서 2024-04-06 13:09:26
0
1
384
Laravel 9.x의 일반 오류: 'id' 필드에 기본값이 없습니다. 내 앱에서 UUID를 사용하고 있으며 다음과 같이 온라인에 표시된 특성을 구현했습니다. traitUuid{protectedstaticfunctionboot():v...
에서 2024-04-06 11:12:54
0
1
350
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！