WeChat 애플릿 예: 선택 윤곽의 애니메이션 효과를 얻는 방법(코드 포함)

이 기사에서는 Marquee의 애니메이션 효과를 구현하는 방법(코드 포함)의 예를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1: 기능 소개 및 설명

마키 효과(기사 제목이 마키에 표시됨), 오른쪽에 기사를 볼 수 있는 버튼이 있습니다. 버튼은 ID에 묶여 있습니다. 현재 Marquee 정보를 클릭하면 해당 ID에 따라 해당 기사 세부 정보 페이지로 이동합니다.

여기서 주목할만한 점은 swiper 구성 요소의 바인딩 변경 이벤트를 사용하여 현재 정보의 배열 첨자를 가져왔다는 것입니다. 보기 버튼의 바인딩 정보 ID 값을 동적으로 변경했습니다.

1. 페이지에서 호출하는 구성 요소로 캡슐화됩니다. :

<!-- //滚动 --> 
<template name="roll"> 
 <block> 
   <navigator url=&#39;../details/details2/detail2?artical_id={{newsId}}&#39;> 
    <view class=&#39;chakan&#39;>查看</view> 
   </navigator> 
  <view class=&#39;sx_lunbo page_row&#39;> 
   <text class=&#39;red&#39;>公告</text> 
   <swiper class=&#39;sx_swiper page_row&#39; autoplay interval="5000" duration="3000" bindchange="newsId" data-newsId=&#39;{{item.id}}&#39; circular> 
    <swiper-item wx:for="{{news}}" wx:key=""> 
     <view class=&#39;reds&#39;>{{item.title}} 
     </view> 
    </swiper-item> 
   </swiper> 
  </view> 
 </block> 
</template>

.sx_lunbo { 
 width: 100%; 
 height: 60rpx; 
 border-bottom: solid 1px #eee; 
} 
.chakan{ 
 padding-left: 25rpx; 
 right: 20rpx; 
 clear: both; 
 position:absolute;  
 height: 40rpx; 
 margin-top: 10rpx; 
 color: #f63; 
 border:solid 1px #f63; 
 border-radius:5rpx; 
 padding: 0rpx 10rpx 0rpx 10rpx; 
 font-size: 28rpx 
} 
.sx_swiper { 
 width: 550rpx; 
 margin-top: 10rpx; 
} 
.sx_swiper swiper-item{ 
  height: 40rpx 
 } 
.reds { 
 overflow: hidden; 
 text-overflow: ellipsis; 
 white-space:nowrap; 
 width:500rpx; 
 font-size: 28rpx; 
 height: 40rpx; 
} 
.red { 
 font-size: 24rpx; 
 color: white; 
 width: 60rpx; 
 height: 40rpx; 
 line-height: 40rpx; 
 background: blue; 
 padding-left: 10rpx; 
 margin: 10rpx; 
 border-radius: 10rpx; 
}

<import src="../template/roll/roll.wxml" /> 
<template is="roll" data="{{news,newsId}}" />

3.news 데이터:

위챗 미니 프로그램 예시 : 마음에 들지 않는 사진을 수집하고 전환하는 기능적 효과 그림

WeChat 미니 프로그램 예: 슬라이딩 선택 장치 구현 방법(코드 포함)

위 내용은 WeChat 애플릿 예: 선택 윤곽의 애니메이션 효과를 얻는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!