微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
代码如下
<view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> <view bindtap='switchNotice' class="closeView">x</view> </view>
data: { //初始化数据 hideNotice: false, notice: '', } // 点击关闭公告 switchNotice: function() { this.setData({ hideNotice: true }) },
@keyframes remindMessage { 0% { -webkit-transform: translateX(90%); } 100% { -webkit-transform: translateX(-180%); } } .tongzhitext { margin-right:80rpx; margin-left: 10rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tongzhi-text { font-size: 28rpx; animation: remindMessage 14s linear infinite; width: 100%; color: #d09868; display: block; } .notice-wrap { background: #ffebda; width: 100%; height: 60rpx; line-height: 60rpx; color: #d09868; font-size: 28rpx; } .closeView { width: 45rpx; height: 45rpx; line-height: 45rpx; position: absolute; right: 20rpx; top: 5rpx; text-align: center; font-size: 35rpx; }
效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信公众号菜单配置微信小程序实例详解
先提条件是你的公众号版定了小程序 第一种:直接配置 第二张:代码配置 1.进入在线接口调试工具 2.选择自定义菜单 菜单body为json格式: { "button": [ { "type": "miniprogram", "name": "合作", "url": "http://form.mikecrm.com/2xb9aT", "a
-
微信小程序侧边栏滑动特效(左右滑动)
侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/index.wxml--> <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&
-
微信小程序教程系列之设置标题栏和导航栏(7)
微信小程序标题栏和导航栏的设置方法,具体内容如下 设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirect
-
微信小程序滚动Tab实现左右可滑动切换
微信小程序滚动Tab实现左右可滑动切换 效果: 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current
-
微信小程序 开发之顶部导航栏实例代码
微信小程序 开发之顶部导航栏 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
-
微信小程序引用公共js里的方法的实例详解
微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
-
小程序实现左右来回滚动字幕效果
本文实例为大家分享了小程序左右来回滚动字幕的具体代码,供大家参考,具体内容如下 wxml: <!--pages/market/market.wxml--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block
-
微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> &l
-
微信小程序下拉菜单效果的实例代码
//wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te
-
微信小程序实现图片翻转效果的实例代码
老规矩,先上图: 页面: <view class='rotateCtn' bindtap='rotateFn'> <!--正面的框 --> <view class='frame {{class1}}'> <image src="{{vo.cover1}}"></image> </view> <!--背面的框 --> <view class='frame {{class2}}'> <im
-
微信小程序canvas写字板效果及实例
微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat
-
微信小程序左滑删除实现代码实例
这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> <view class="co
-
微信小程序实现一个简单swiper代码实例
这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 话不多说,上截图 HTML <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindcha
-
微信小程序-form表单提交代码实例
效果 html代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section section_gap"> <view class="section__title">是否公开信息</view> <switch name="isPub" /> </view&
-
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ success: (res) => { console.info(res.authSetting); wx.getUserInfo({ success: res => { this.globalData.userInfo = res.userInfo console.info("一开始同
-
微信小程序制作扭蛋机代码实例
公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能.在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题).最后还是自己做一个吧- _ - ,效果如下: 1.wxml 当然我这里没有用wx:for遍历 <!-- 扭蛋机 --> <view class="egg"> <image class="egg_ji" src="{{imgUrl}}small_program/game/game_luck_draw_nd.p
-
微信小程序实现上传照片代码实例解析
纸上谈坑 在我实现了这个功能之前,我讲讲我是怎么在这个坑里爬上来的: 我实现上传文件后端的接口的参数是String类型的 前台传的参数:http://tmp/wx忽略很多字母数字.png 但由于这张是本地照片url(外网无法访问),我后台拿到的是一个String类型,是没有办法是去识别这是一张图片的,访问不了这个数据,仅仅把它当做字符串而已.(低级错误) 代码实现 前言:后端接受文件有2种方式(参数): 1. MultipartFile 2.base64 微信上传文件的开发文档 小程序代码 <!
随机推荐
- 一句话木马的原理及利用分析(asp,aspx,php,jsp)
- JAVA比较两张图片相似度的方法
- IOS开发使用KeychainItemWrapper 持久存储用户名和密码
- asp.net下计算数字1至10的总和
- PHP备份/还原MySQL数据库的代码
- Laravel给生产环境添加监听事件(SQL日志监听)
- Ajax传Jsond Mvc后台接收实例
- jsp传值中文乱码问题解决方法示例介绍
- c++中#include <>与#include""的区别详细解析
- python格式化字符串实例总结
- Kotlin 基础语法详细介绍
- javaScript 动态访问JSon元素示例代码
- slice函数的用法 之不错的应用
- Ubuntu下安装Chrome的方法分享
- Android布局自定义Shap圆形ImageView可以单独设置背景与图片
- iOS 断点上传文件的实现方法
- 移动前端图片压缩上传的实例
- Linux文本处理命令sort详解
- vue移动端html5页面根据屏幕适配的四种解决方法
- BootStrap模态框闪退问题实例代码详解