微信小程序菜鸟学习(二)

常见组件的学习
通常组件包括:view,text,rich,-text,button,image,swiper,radio,checkbox等
一.view与 text
view视图容器。代替的是原来的div标签,有hover-class,指定按下去的样式类,当 hover-class=“none” 时,没有点击态效果;hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态;hover-start-time,按住后多久出现点击态,单位毫秒;hover-stay-timetext手指松开后点击态保留时间,单位毫秒;四个属性
text是文本标签(只能嵌套text)其中有selectable(长按文字可复制)与decode(可对&nbsp 回车 进行解码)属性,都属于Boolean类型。
二.image
图片默认不能超过2兆,所以用图片是统一使用外网图片(土豆图床上传图片可以是本地图片变为网络图);组件默认宽度320px,高度240px,微信小程序菜鸟学习(二)
mode=“”属性中包括scale ToFill,aspectFill,aspectFit,widthFix,top,bottom,center,left等用来调整图片建材,缩放的模式;lazy-load属性为图片懒加载,他会自己判断,当图片出现在视扣上下叁屏即会实现。
三.swiper
轮播图组件,必须搭配swiper-item轮播项使用。
swiper存在默认宽高度,宽度100%,高度150px,;图片存在默认宽高度1125px352px,swiper高度需要计算=swiper宽度原图高度/原图宽度 height:calc(100vw*352/1125)
微信小程序菜鸟学习(二)
swiper几个常用属性:
interval number 5000 否 自动切换时间间隔
autoplay boolean false 否 是否自动切换
circular boolean false 否 是否采用衔接滑动
indicator-dots boolean false 否 是否显示面板指示点
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色
四.navigater
导航组件(块级元素 默认会换行)
属性 URL 实现当前小程序的跳转 可以写绝对路径也可写相对路径;
属性 target 跳转到自己的或其他的小程序 值为是self /miniProgram;
属性open-type 跳转方式;
em:open-type取值
navigate 保留当前页面,跳转跳转到应用内的某个页面,但是不能跳到tabBar页面
redirect 关闭当前页面,跳转到应用内的某个页面,但是不允许跳到tabBar页面
switch Tab 跳转到tabBar页面,并关闭其他所有非tabBar页面
reLaunch 关闭所有页面,打开到应用内的某个页面
navigateBack 关闭当前页面,返回上一页面或多级页面
exit 退出小程序,target=“miniProgram”时生效
五.rich-text
富文本标签。
node属性来实现,接受标签字符串(在.js中写html,受信任的HTML节点及属性
全局支持class和style属性:a ,abbr ,address ,article ,aside ,b ,bdi ,bdo ,big ,,br ,caption ,center ,cite ,code ,col ,colgroup ,dd ,del ,div ,dl ,dt ,em ,fieldset ,font ,footer ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,header ,hr ,i ,img ,ins ,label ,legend ,li ,mark ,nav ,ol ,p ,pre ,q ,rt ,ruby ,s ,section ,small ,span ,strong ,table,td,th,ul ,tr ,tt等);接受对象数组(没学会
六.button
button的外观样式属性:微信小程序菜鸟学习(二)
open-type属性
contact 打开客服会话,需要在小程序后台配置(为此按钮添加一个客服微信号即可)
share 触发用户转发,不能分享到朋友圈 微信小程序菜鸟学习(二)
getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,非企业账号无授权 自己做获取信息加密过(打印出的detail),需要自己搭建后台小程序进行解析
微信小程序菜鸟学习(二)
getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息
launchApp 打开APP,可以通过app-parameter属性设定向APP传的参数
openSetting 打开授权设置页
feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入 左侧菜单“客服反馈”页面获取到反馈内容
七.icon
字体图标
type icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size 默认值23 icon的大小
color icon的颜色,同css的color
微信小程序菜鸟学习(二)
八.radio和checkbox
radio单选框
radio 一定要和 父元素 radio-group使用
微信小程序菜鸟学习(二)
checkbox为复选框
checkbox 一定要和 父元素checkbox-group使用
微信小程序菜鸟学习(二)

微信小程序菜鸟学习(二)微信小程序菜鸟学习(二) CxiE 发布了3 篇原创文章 · 获赞 0 · 访问量 95 私信 关注
上一篇:移动端样式问题


下一篇:从app里跳到appstore评论页面的实现