当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

    小程序两种滚动公告栏的实现方法(2)

    栏目:代码类 时间:2019-09-17 11:19

    sipwer滚动方式代码如下所示

    swiper默认为横向滚动,vertical为true,则纵向滚动

    // wxml<!-- 公告 --><text class='swiper-notice'>公告:</text><swiper class='swiper-container' autoplay='true' vertical='true' circular='true' interval='2000'>  <block wx:for='{{msgList}}'>    <navigator url='/pages/notice/notice?title={{item.url}}' open-type='navigate'>      <swiper-item>        <view class='swiper-item'>{{item.title}}</view>      </swiper-item>    </navigator>  </block></swiper><!-- 公告 end -->// wxss/* 公告start */.swiper-notice { font-size: 28rpx; color:  #fa6016;}.swiper-container { margin-left: 10rpx; width: 400rpx; height: 100%;}.swiper-item { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 2rpx;}/* 公告end */

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持IIS7站长之家。