미니 프로그램 개발 환영 인터페이스의 코드 예제-미니 프로그램 개발-php.cn

미니 프로그램 개발 환영 인터페이스의 코드 예제

Y2J

풀어 주다： 2017-05-10 13:45:02

원래의

2796명이 탐색했습니다.

이 기사에서는 WeChat 애플릿의 환영 인터페이스 개발에 대한 자세한 예에 대한 관련 정보를 주로 소개합니다. 다음은 도움이 필요한 친구가 참조할 수 있는 환영 인터페이스, 구현 코드 및 구현 렌더링의 간단한 예입니다.

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

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

아래 순서대로 소개하겠습니다.

레이아웃 구현

스타일 구현

1. 레이아웃 구현

전체 레이아웃은 스와이퍼 슬라이딩 뷰를 사용하여 구현됩니다. 슬라이딩 뷰의 각 항목은 슬라이딩 뷰의 각 항목을 포함합니다.

rree

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. 스타일

스위퍼 스타일은 슬라이딩

컨트롤

을 정의하는 스타일입니다. 슬라이딩 컨트롤의 위치는 절대 레이아웃이며, 너비와 높이는 전체 화면을 차지합니다. .swiper-image 스타일 이미지 그림을 정의하는 스타일로 너비와 높이가 화면 전체를 차지하며 투명도는 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. 효과 보기

[관련 추천]