孙肖宁

微信小程序的滚动公告的实现
本来呢想封装成一个组件的,但是呢代码不是很多就直接拿过来用吧。主要用与轮番显示公告,并且如果公告文字太长就会显示为...
扫描右侧二维码阅读全文
01
2019/08

微信小程序的滚动公告的实现

本来呢想封装成一个组件的,但是呢代码不是很多就直接拿过来用吧。主要用与轮番显示公告,并且如果公告文字太长就会显示为省略号,是不是很好用呢。小编现在已经习惯吧样式写在接口里面了,入股不喜欢,那么你就拆出去吧。这也是最近被一个很厉害的人带的,小编之前总是会把样式单独写的。
上代码吧。哈哈哈哈
11.jpeg
wxml:

 <view style="display:flex;align-items:center;height: 70rpx;background:#FFFFFF;padding: 10rpx 20rpx;">
        <image src="https://www.sunxiaoning.com/usr/uploads/2019/03/3616970405.jpeg;height:50rpx" />
        <swiper style="width:90%;height: 55rpx;padding-left:10rpx;display:flex;align-items:center;" vertical="true" autoplay="true" circular="true" interval="2000">
            <block wx:for="{{msgList}}">
                <navigator url="/pages/index/index" open-type="navigate">
                    <swiper-item style="display:flex;align-items:center;">
                        <view style="font-size: 25rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;letter-spacing: 2px;">{{item.title}}</view>
                    </swiper-item>
                </navigator>
            </block>
        </swiper>
    </view>

js代码

 this.setData({
                    msgList: [{
                        title: "小宁博客"
                    },
                    {
                        title: "小宁博客-孙肖宁的个人博客"
                    },
                    {
                        title: "小宁博客-孙肖宁的个人博客;小宁博客-孙肖宁的个人博客"
                    }
                    ]
                });
Last modification:August 1st, 2019 at 04:37 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment