小程序实现上下滚动的公告

 行业新闻    |      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:"公告:优睿惠民网正式上线啦"},

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

    ]

    }

})

效果如图:

注意事项请看红色部分