微信小程序入门之广告条

在小程序页面，有时候需要弄一条广告条进去，作用可以用来提醒客户端，更加醒目，这种实现很容易，要用到组件swiper,navigator
先上效果图

wxml:

<swiper class="swiper_container" autoplay="true"  interval="2000" circular="true"><block wx:for="{{msgList}}"><navigator url="服务器" open-type="navigate"><swiper-item><view class="swiper_item">{{item.title}}</view></swiper-item></navigator></block></swiper>

js:

Page({data: {msgList: [{ url: "url", title: "公告１１：这是一条公告，效果是每个ｘ秒，会向右滑动，" },{ url: "url", title: "公告２２：这里是向右滑动。。。。" },{ url: "url", title: "公告３３：啊哈哈微信小程序，。。。" }]}})

WXSS

.swiper_container
{background-color:rgb(255, 255, 255);height:40px;           //可以改变背景颜色（background-color)，或者字体颜色(color)
}

虽然这段代码很容易理解，但是这种效果是非常实用的

如果有哪里看不懂，欢迎下面评论提问

微信小程序入门之广告条相关推荐

微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
从零开始的微信小程序入门教程(一)
从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践 ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序 - 入门篇
微信小程序入门文章目录微信小程序入门全局配置 window配置微信组件微信小程序与Vue 复用性自定义Tabbar 组件的封装路由跳转网络低代码本地存储弹窗交互 weUI 全局配置 ...
微信小程序入门教程---列表渲染多层嵌套循环及wx:key的使用(双层for循环)
前言入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items} ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
做一个微信小程序给TA——程序猿小白的情人节礼物（微信小程序入门——一文学会小程序开发到发布小程序的全过程）
# 情人节可送给女朋友的礼物,或者作为两人的纪念 # 效果展示:微信搜索 "王美美与曾小帅" 小程序即可查看效果 # 微信小程序入门--使用免费后端云(Bmod)搭建留言板 ...
微信小程序入门与实战（七月）
微信小程序入门与实战(七月) 第1章初识微信小程序第2章小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...

微信小程序入门之广告条

微信小程序入门之广告条相关推荐

最新文章

热门文章