小程序 - 实现滚动文字

短命女 2022-04-22 06:34 269阅读 0赞

### 小程序 - 实现滚动文字 ###

截图：  
![1483449-20181102210009024-2068591461.gif][]

*  index.wxml 文件

<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000">
    <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>

*  index.wxss 文件

/**index.wxss**/
    .swiper_container {
    background-color: red;
    height: 50rpx;
    width: 80vw;
    }
    
    .swiper_item {
    font-size: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

*  index.js 文件

//index.js
    //获取应用实例
    var app = getApp()
    Page({
    data: {
    },
    onLoad(e) {
    console.log(e.title)
    this.setData({
    msgList: [
    { url: "url", title: "多地首套房贷利率上浮 热点城市渐迎零折扣时代" },
    { url: "url", title: "交了20多年的国内漫游费将取消 你能省多少话费？" },
    { url: "url", title: "北大教工合唱团出国演出遇尴尬:被要求给他人伴唱" }]
    });
    }
    })

[1483449-20181102210009024-2068591461.gif]: /images/20220422/a08ea6bf509748ee8c4dde7ace12ba1b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序上下滚动公告实现

<!-- <swiper class="swiper_container" vertical="true" autoplay="

水深无声/ 2022年12月30日 03:37/ 0 赞/ 156 阅读

相关 html滚动文字（marquee标签）

<!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <m

淡淡的烟草味﹌/ 2022年10月08日 12:27/ 0 赞/ 219 阅读

相关 html图片、背景音乐、滚动文字

html+css网站开发兵书——html部分 3.图像的各个属性相对文字的对齐方式 <img src="图像文件的地址" align="相对文字的对齐方

太过爱你忘了你带给我的痛/ 2022年06月18日 04:24/ 0 赞/ 245 阅读

相关利用jquery实现文字上下滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

深藏阁楼爱情的钟/ 2022年06月15日 11:59/ 0 赞/ 193 阅读

相关 marquee标签_html滚动文字

marquee标签可以让我们在网页中编写的文字动起来，不论是上下滚动还是左右滚动都可以通过marquee标签中的属性来设置。语法：﹤marquee﹥需要被滚动的文字﹤/marq

小咪咪/ 2022年05月30日 05:08/ 0 赞/ 444 阅读

相关小程序 canvas旋转文字

小程序实现：效果如下图： ![70][] js部分： //canvas画图片 savedetailCanvas : function () \{ //

末蓝、/ 2022年05月21日 06:28/ 0 赞/ 581 阅读

相关微信小程序实现横向滚动

最近做项目的时候遇到一个需求实现自定义导航栏的横向滚动,研究了一会,今天记录一下. 看一下实现效果: (下面的导航栏由六个view组成,可滑动) ![70][]

ゝ一纸荒年。/ 2022年05月21日 00:45/ 0 赞/ 392 阅读

相关小程序滚动导航

备用的小程序样式，以后直接复制就好了，哈哈 index.wxml  <view class="container" bindtap

男娘i/ 2022年05月20日 09:36/ 0 赞/ 236 阅读

相关小程序 - 实现滚动文字

小程序 - 实现滚动文字截图： ![1483449-20181102210009024-2068591461.gif][] index.wxml 文件

短命女/ 2022年04月22日 06:34/ 0 赞/ 270 阅读

相关微信小程序——复制文字

查看微信文档剪贴板API：[https://developers.weixin.qq.com/miniprogram/dev/api/wx.setClipboardData.

矫情吗；*/ 2022年01月29日 14:34/ 0 赞/ 508 阅读