위 챗 애플 릿-스크롤 메시지 알림 의 인 스 턴 스 코드

앞 에 쓰기:
이번 에는 위 챗 애플 릿 이 상하 스크롤 메 시 지 를 실현 하 는 것 을 정리 하고 싶 습 니 다.주로 swiper 구성 요 소 를 이용 하여 이 루어 집 니 다.swiper 구성 요 소 는 애플 릿 에서 슬라이더 보기 용기 입 니 다.
우 리 는 vertical 속성(기본 값 은 false,기본 좌우 스크롤 실현)을 true 로 설정 하여 상하 스크롤 을 실현 합 니 다.
(주의해 야 할 것 은:swiper 에 vertical 속성 이 존재 한다 면 값 이 true 나 false 이 든 매개 변수 가 설정 되 어 있 지 않 든 상하 스크롤 이 실 현 됩 니 다)
심 천 에서 돌아 와 위 챗 애플 릿 프로젝트 를 했 습 니 다.기 쁜 것 은 돌아 와 서 곧 심 천 에서 이틀 동안 방 세 를 벌 었 다 는 것 입 니 다.하하...
wxml


<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
  <block wx:for="{{msgList}}">
   <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate">
    <swiper-item>
     <view class="swiper_item">{{item.title}}</view>
    </swiper-item>
   </navigator>
  </block>
 </swiper>

wxss


 .swiper_container {
 height: 55rpx;
 width: 80vw;
}

.swiper_item {
 font-size: 25rpx;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 letter-spacing: 2px;
}


var app = getApp()
Page({
 data: {
 },
 onLoad(e) {
  console.log(e.title)
  this.setData({
   msgList: [
    { url: "url", title: "  ：                      " },
    { url: "url", title: "  ：                  " },
    { url: "url", title: "  ：               ？" }]
  });
 }
})

데 이 터 는 setData 함수 에 놓 여 있 습 니 다.setData 함수 의 주요 역할 은 데 이 터 를 논리 층 에서 시각 층 으로 보 내 는 것 이지 만 한 번 에 대량의 데 이 터 를 설정 하 는 것 을 피해 야 합 니 다.
효과.

뒤에 쓰다
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

OpenSSL 생 성 ssl 인증서

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

위 챗 애플 릿-스크롤 메시지 알림 의 인 스 턴 스 코드

좋은 웹페이지 즐겨찾기