小程序實現上下滾動的公告

 行業新聞    |      2018-07-24

小程序實現上下滾動的公告,請往下看:

wxml:

<swiper class="swiper-container" vertical='true' autoplay='true' circular='true' interval='2000' duration='500'>

<block wx:for="{{noticeList}}" wx:for-item="item" wx:key="*this">

<swiper-item>

<navigator url='' open-type='navigate' hover-class='none'>

<view class="item">{{item.title}}</view>

</navigator>

</swiper-item>

</block>

</swiper>

wxss:

.swiper-2 .swiper-container{height:80rpx;}

.swiper-2 .swiper-container .item{

font-size:35rpx;

text-overflow: ellipsis;

white-space: nowrap;

line-height: 80rpx;

text-indent: 28rpx;

color:red;

}

js:

page:({

   data:{

      noticeList:[

        {id:1,title:"公告:優?;菝窬W正式上線啦"},

        { id: 2, title: "公告:今日大促銷,88折,速進" }

    ]

    }

})

效果如圖:

注意事項請看紅色部分