> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 미니 프로그램에서 움직이는 텍스트 효과를 만드는 방법(코드 포함)

WeChat 미니 프로그램에서 움직이는 텍스트 효과를 만드는 방법(코드 포함)

php中世界最好的语言
풀어 주다: 2018-06-01 09:22:39
원래의
5031명이 탐색했습니다.

이번에는 위챗 미니 프로그램에서 마키 효과를 만드는 방법(코드 포함)을 보여드리겠습니다. 위챗 미니 프로그램에서 마키 효과를 만들 때 주의사항은 무엇인가요? .

1: 기능 소개 및 설명

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

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

아직 이해가 되지 않는 부분이 있으면 (173683895) WeChat 애플릿 개발 교환 그룹에 참여하세요.

2: 렌더링:

3: 전체 소스 코드

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

2. reee

<import src="../template/roll/roll.wxml" /> 
<template is="roll" data="{{news,newsId}}" />
로그인 후 복사
@import "../template/roll/roll.wxss";
로그인 후 복사
3.news 데이터 :

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 반사 및 종속성 주입 사용 사례 분석

WeChat 미니 프로그램에서 인증 코드 비밀번호 입력 상자 기능을 개발하는 방법

위 내용은 WeChat 미니 프로그램에서 움직이는 텍스트 효과를 만드는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿