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

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

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

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

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

레이아웃 구현

스타일 구현

1. 레이아웃 구현

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

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

2. 논리 구현

데이터에는 imgs 배열이 준비되어 있으며 여기에도 시작 기능이 있습니다. 이 함수는 인터페이스에서 버튼의 클릭 이벤트를 모니터링하는 데 사용됩니다.

wx.navigateTo API는 인터페이스 점프를 구현하는 데 사용되며 URL은 점프 인터페이스를 지정하는 데 사용됩니다

    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: '../home/home'
      })
      // wx.redirectTo({ url: '../index/index' })
    },


   })

3. 스타일 구현

스와이프 스타일은 슬라이딩 컨트롤을 정의하는 스타일입니다. 슬라이딩 컨트롤의 위치는 절대 레이아웃이고 너비와 높이는 전체 화면을 차지합니다

.swiper -image 스타일은 이미지 그림을 정의하는 스타일입니다. 너비와 높이가 전체 화면을 차지하며 투명도는 0.9

입니다. 버튼 버튼 정의: 위치는 절대 레이아웃, 하단에서 90px, 투명도는 0.6,..

  swiper {
   /*这个是绝对布局*/
   position: absolute;
   height: 100%;
   width: 100%;
  }


  .swiper-image {
   height: 100%;
   width: 100%;
   /*透明度*/
   opacity:0.9;
  }


  .button-img{  
    /*这个是绝对布局*/
    position: relative;
    bottom: 90px;
    height: 40px;
    width: 120px;
    opacity:0.6;
  }

4. 효과 보기

읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

위 내용은 WeChat Mini 프로그램 환영 인터페이스 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!