微信小程序入门之广告条实现方法示例

本文实例讲述了微信小程序入门之广告条实现方法。分享给大家供大家参考，具体如下：

在小程序页面，有时候需要弄一条广告条进去，作用可以用来提醒客户端，更加醒目，这种实现很容易，要用到组件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)
}

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

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序官方动态自定义底部tabBar的例子

    最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的.在网上搜集了海量资料后发现无非两种解决方法:1.是建立模板,可是会有不能忍受的抖动:2.是利用小程序的组件开发:但是项目已经进行了一般,不可能再进行大的改变: 怎么办呢?? 无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接. 先看效果图: 1.首先看一下官方用法 这是几个非常重要你需要

  • 微信小程序模板消息推送的两种实现方式

    最近在做微信小程序,为了让用户能更加方便的获取到小程序内部的通知,便想着用模板消息来解决此类问题.首先介绍一下两种方法 第一种是传统的按照微信开发文档来实现模板消息的获取,首先要明确的是你要有一个第三方的服务器,因为微信现在规定在小程序内部不能直接请求微信的服务器,而是要请求第三方服务器,由第三方服务器来请求微信的服务器 1.传统方式实现模板消息 1.1获取用户openId 这一步可以在wx.login方法内获取,用来标注模板消息的接受者 1.2获取模板ID 有两个方法可以获取模版ID 通过模版

  • 微信小程序进入广告实现代码实例

    微信小程序进入广告实现代码实例

    这篇文章主要介绍了微信小程序进入广告实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <view class="container"> <image src="../../imgs/swiper1.jpg"></image> <text bindtap="cliadv">跳过广告 {{miao}}</text> &l

  • 基于PHP实现微信小程序客服消息功能

    项目说明: 本项目是一个简单微信小程序客服消息类,实现客服消息相关功能.官方给的php示例有误,这里就不再吐槽了. 本示例是采用开发者服务器,没有采用云调用的形式. 官方文档: 客服消息指南 客服消息服务端 适用场景 客户消息流程图 使用步骤 1.开启客服消息 https://mp.weixin.qq.com/wxam... 登录-开发-开发设置-消息推送 []( https://raw.githubusercontent... 点击"启动" []( https://raw.githu

  • 微信小程序后台持续定位功能使用详解

    微信小程序后台持续定位功能使用详解

    微信小程序团队在7月30日更新了 基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口 从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.stopLocationUpdate//关闭监听实时位置变化,前后台都停止消息接收 3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息 4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息 详细信息可查看https

  • 小程序中this.setData的使用和注意事项

    前言:微信小程序中经常需要用到this.setData({})把变量值渲染到视图层,那到底什么是this.setData,如何使用?需要注意哪些?作为一个初学者,分享一点我的经验,希望大家批评指正. 介绍:setData函数主要用于将逻辑层数据发送到视图层,同时对应的改变this.data.x的值. 参数:Object 以 key : value 的形式表示,将 this.data 中的 key 对应的值改变成 value. 使用:先给出代码,wxss没有什么意义就不贴了 index.wxml

  • 微信小程序 授权登录详解（附完整源码）

    微信小程序 授权登录详解（附完整源码）

    一.前言 由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发. 官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否

  • 微信小程序入门之广告条实现方法示例

    微信小程序入门之广告条实现方法示例

    本文实例讲述了微信小程序入门之广告条实现方法.分享给大家供大家参考,具体如下: 在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件swiper,navigator 先上效果图: wxml: <swiper class="swiper_container" autoplay="true" interval="2000" circular="true"> <bl

  • 微信小程序转化为uni-app项目的方法示例

    前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的动态tab和swiper切换的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及极其的符合我的需求.那么问题来了我该如何将微信小程序转为为uni-app项目呢?搜索了下网上的相关解决方案还真有个将微信小程序转化为uni-app的项目,该项目名称叫做[miniprogram-to-uniapp],接下来就看看如何实操吧! miniprogram-to-uniapp项目介绍:

  • 微信小程序拍照和摄像功能实现方法示例

    本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 拍照 原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后

  • 微信小程序使用wxParse解析html的方法示例

    微信小程序使用wxParse解析html的方法示例

    本文实例讲述了微信小程序使用wxParse解析html的方法.分享给大家供大家参考,具体如下: 首先去 https://github.com/icindy/wxParse 下载wxParse,只拷贝wxParse文件夹即可. 或者点击此处本站下载. 一.首先将插件文件夹复制到项目里面 二.导入文件 首先在xx.wxml导入文件,在文件头写上: <import src="../../wxParse/wxParse.wxml"/> 然后再wxss导入文件,在文件头写上: @im

  • 微信小程序实现下载进度条的方法

    微信小程序实现下载进度条的方法

    我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条 progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress属性介绍 属性名 作用 参数值 percent 进度百分比0~100 show-info 在进度条右侧显示百分比 true/false 默认false active 进度条从左往右的动画 true/false

  • 在微信小程序中渲染HTML内容的方法示例

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

  • 微信小程序页面间传值的实现方法示例

    小程序页面间传值 大家晚上好,说晚上好是因为是在晚上写的,说这句话是因为这句话开篇不那么突然.那么小程序的页面间传值,在我使用这段时间里,我就非常的主观的把它们分为wx.navigateTo和非wx.navigateTo的,因为wx.navigateTo有一个事件参数event,我从当前页跳转到下一页,如果需要能返回,我都用的wx.navigateTo,那这个event作用嘛就是可以接收,下一页返回回来的参数的.像

  • 详解微信小程序——自定义圆形进度条

    详解微信小程序——自定义圆形进度条

    微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con

  • 微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

  • 微信小程序之圆形进度条实现思路

    微信小程序之圆形进度条实现思路

    需求概要 小程序中使用圆形倒计时,效果图: 思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"

随机推荐