marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--components/marquee.wxml--> <view class='marquee_container'> <view class='marquee_text' style='{{ orientation }}:{{ marqueeDistance }}px;font-size

在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class="marquee_container" style="--marqueeWidth--:-12em">   <view class="bulletin_box_img2">     <image src="../../ima

百度蛮多例子的,但是代码太长懒得看了 前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注意字体的单位px,rpx). 效果图 短字 长字 wxml <view class="content"> <text class="every" decode="{{true}}" style="right:{{annou

wxml: <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"> {{text}}

在小程序中有模板跟组件的概念.但模板更多的用于内容的展示,更复杂的交互逻辑就没办法了.所以在小程序中也定义了一些组件来解决一些简单逻辑的功能. 但有时预定义的组件并不能满足我们的需求,这时就需要我们自己定义了. 这里主要讲用Component构造器来自定义组件. 本例为一个评分的小组件. 首先定义组件 创建自定义组件目录(与正常页面结构相同拥有:.js,.json,.wxml,.wxss) 在mycom.json中声明该文件为Component 构造器构造的组件 { "component&quo

原文:微信小程序把玩(八)view组件 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性"row"横向排列"column"纵向排列 justify-content 主轴的对齐方式(如果flex-direction为row则主轴就是水平方向) 可选属性 ('flex-start', 'flex-end', 'center', '

微信小程序(微信应用号)组件讲解[申明:来源于网络] 地址:http://www.cnblogs.com/muyixiaoguang/p/5902008.html

原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" ty

原文:微信小程序把玩(十一)icon组件 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> <icon type="success" size="40"/> <!--安全成功标志图标--> <icon type="safe_success" size="40"/> <!--提示信息图标-->

原文:微信小程序把玩(十三)progress组件 进度条描述的是一种加载的状态,比如软件升级下载进度, 视频,图片下载进度- 主要属性: wxml <progress percent="80" show-info="true" stroke-width="5" color="red" active="true"/>

原文:微信小程序把玩(九)scroll-view组件 scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块 主要属性: 使用演示: wxml <!--垂直滚动,这里必须设置高度--> <scroll-view scroll-y="true" style="height: 200px"> <vie

原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些. 主要属性: 属性只需要设置就行了 也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理. wxml <!--是否显示圆点,自动播放, 间隔时间, 监听滚动和点击事件--> &l

简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面的初始数据 data: { text:"Gary_测试ing", btntext:"按钮_测试" }, //生命周期函数--监听页面加载 onLoad: function (options) { }, //生命周期函数--监听页面初次渲染完成 onReady: func

前言 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东西: appId 密钥(小程序配置界面) 商户号 api密钥(商家后台自己设置) 当然这些是不用我们自己申请的,公司会有人申请好,然后要什么跟这个人说,让他提供就可以了. 首先来看一下官方给出的业务流程时序图 这个图很清晰的表达了在小程序支付中的整个流程,每一步要做些什么. 一个完整的支付,一般情况

本文转自:https://www.cnblogs.com/onetwo/p/6667424.html 公司最近在做微信小程序,被分配到做支付这一块,现在对这一块做一个简单的总结和梳理. 支付,对于购物来说,可以说是占据了十分重要的一块,毕竟能收到钱才是重点. 当然在开发之前,我们需要有下面这些东西: appId 密钥(小程序配置界面) 商户号 api密钥(商家后台自己设置) 当然这些是不用我们自己申请的,公司会有人申请好,然后要什么跟这个人说,让他提供就可以了. 首先来看一下官方给出的业务流程时

H5有很多树形图(树状图)的组件,echarts也有.比如像bootstrap的treeview,定制性很强.不过这些都无法方便地为小程序所用,除非整个页面用H5搭建再用webview框进去,有点粗暴.所以还是自己写一个简单的树形图组件试试.最终效果如下: 新建一个微信小程序项目,在app.json的pages里添加这么一行, "pages":[ "pages/index/index", "pages/logs/logs", "page

template模块主要是展示,方法需要在使用template的页面中定义,对于通用的数据,最先想到或者理应是template,但是template有个缺点,那就是只是页面效果,不会有对应的js操作. 而component组件,则拥有自己的js文件,整个component组件类似一个page页面.简单来说,只是展示用,建议使用template,组件中涉及到较多的逻辑,建议使用component. 一.template模块 定义模板,一份template.wxml文件中能写多个模板,用name区分

这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具,如上图.点击添加项目,会出现新建项目页面,如下图: 其中AppID随意填写.ps:正式开发了估计有要求的.填写项目名称并选择保存的路径,添加项目就ok了. 就这样,一个hello world 就OK了. 好了,我们现在开始讲解微信小程序的组件. 先倒入官方流出的demo文件.可以到微信小程序开发群:

小程序中最基础,最常用的组件--view,类似于html中div的存在有四个属性: ①hover-class:指定按下去的样式类.当 hover-class="none" 时,没有点击态效果 实例: <view hover-class='red' class='view' >hover可不是鼠标滑过哦</view> .red{ color: red; } ②hover-stop-propagation:阻止事件冒泡,指定是否阻止本节点的祖先节点出现点击态,遗憾的

微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swiper高度为100vh,这时会产生css3滚动条,隐藏掉swiper-item::-webkit-scrollbar 即可. 详情示例见:https://www.cnblogs.com/cisum/p/10443412.html 1 swiper { 2 width: 100%; 3 height: 1

一.组件生命周期:一个组件从创建开始到使用中最后被销毁的过程 ---onLoad事件:组件(创建成功并且加载完成)触发一次 (1)当此事件触发发送请求获取数据 (2)获取其他组件传递数据(options) ---onReady 组件渲染成功   触发一次 ---onShow   组件显示完成   触发多次 ---onHide     组件隐藏完成   触发多次 ---onUnload 组件销毁          触发一次(谨慎使用) 二.小程序云开发(重点)----出错非常 小程序团队+腾讯云合