집 > 기사 > 위챗 애플릿 > WeChat Mini 프로그램 소개 환영 인터페이스 개발

WeChat Mini 프로그램 소개 환영 인터페이스 개발

不言원래의: 2018-06-22 17:04:272445검색

이 글에서는 주로 WeChat 미니 프로그램 환영 인터페이스 개발의 세부 사례에 대한 관련 정보를 소개합니다. 다음은 환영 인터페이스, 구현 코드 및 구현 렌더링에 대한 간단한 예입니다.

WeChat 미니 프로그램 환영 인터페이스

시중에 나와 있는 대부분의 앱에는 환영 인터페이스가 있습니다. 다음은 WeChat 애플릿을 통해 환영 인터페이스를 구현하는 방법을 보여줍니다.

다음은 다음 순서대로 소개됩니다.

레이아웃 구현

로직 구현

스타일 구현

1. 레이아웃

전체 레이아웃은 스와이퍼 슬라이딩 뷰를 사용하여 구현됩니다. 슬라이딩 뷰의 각 항목은 블록으로 둘러싸여 있습니다. 항목에는 이미지 그림과 버튼 버튼이 포함되어 있습니다.

2. 논리 구현

은 데이터에 imgs 배열을 준비하고 배열에 3개의 그림 주소를 저장합니다. 여기에는 인터페이스에서 버튼 클릭 이벤트를 모니터링하는 데 사용되는 시작 기능도 있습니다.

wx.navigateTo 이 API의 기능은 인터페이스 점프를 구현하고 반환 버튼을 갖는 것입니다. URL은 점프 인터페이스를 지정하는 데 사용됩니다

  <swiper indicator-dots="true">
    <block wx:for="{{imgs}}" wx:for-index="index">
     <swiper-item class="swiper-items" >
      <image class="swiper-image" src="{{item}}"></image>
      <button class="button-img" bindtap="start" wx:if="{{index == imgs.length - 1}}" >立即体验</button>
     </swiper-item>
    </block>
  </swiper>

3 스타일 구현

슬라이딩 컨트롤 스타일: 슬라이딩 컨트롤의 위치는 절대 레이아웃이며 너비와 높이는 전체 화면을 차지합니다

스와이프 이미지 스타일은 이미지 그림의 스타일(너비와 높이)을 정의합니다. 는 전체 화면을 차지하며 투명도는 0.9 버튼 버튼을 정의하는 스타일입니다. 위치는 절대 레이아웃, 하단에서 90px, 투명도는 0.6..

    Page({
    data:{
      imgs:[
        "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",
        "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",
        "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
      ],

      img:"http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg",
    },

    start(){
       wx.navigateTo({
        url: &#39;../home/home&#39;
      })
      // wx.redirectTo({ url: &#39;../index/index&#39; })
    },


   })

4. 효과 보기

이상이 글의 전체 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

WeChat Mini 프로그램 소개 환영 인터페이스 개발

관련 기사