网页设计图

2020-12-28 23:27

网页设计图:微信小程序学习总结(二)样式、属性、模板操作分析

微信小程序学习总结(二)样式、属性、模板操作分析  更新2020年06月04日   作者:huangyuxin_   这篇文章主要介绍了微信小程序样式、属性、模板操作,结合实例形式分析了微信小程序尺寸单位、样式、数据初始化、属性、模板调用相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序样式、属性、模板操作。分享给大家供大家参考,具体如下:

小程序尺寸单位

rpx是小程序常见的尺寸单位,那么他和px有啥不同一样呢。rpx可以根据屏幕宽度进行自适应。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

小程序的样式

你可以这么写
内联方式: text hello world /text
你也可以这么写,直接在wxss中写也阔以

小程序的全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

初始化数据

第一种方式

 * 页面的初始数据
 data: {
 text:'hello world',
 array:['啊哦','haha'],

页面中渲染

 text {{text}} /text 
 text {{array[0]}}:{{array[1]}} /text 

效果

第二种方式

 * 生命周期函数--监听页面加载
 onLoad: function (options) {
 var content = {test:
 1,test1:2}
 this.setData(content);

模板中调用
text {{test1}} /text

控制属性

默认是false,所以不显示,在js文件中来给result赋值

 text wx:if="{{result}}" 哈哈哈 /text 


算术运算
 view {{a + b}} /view 
逻辑判断
 view wx:if="{{length 5}}" /view 
字符串链接
 view {{"hello" + 'world'}} /view 
遍历

花括号和引号之间如果有空格,将最终被解析成为字符串

 view wx:for="{{[1,2,3]}} " 
 {{item}}
 /view 

绑定数据

 content:[{
 name:'haungyuxin',
 age:18
 name:'zhangfei',
 age:19

默认是这个样子的,可以根据自己喜好,自己改吧

 view wx:for="{{content}}" wx:for-item='item' 
 {{item.name}}
 /view 

同样的也可以看当前的下标

 view wx:for="{{content}}" wx:for-item='item' wx:for-index='key' 
 {{item.name}}:{{key}}
 /view 

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


相关文章

今天小编就为大家分享一篇解决layer弹层遮罩挡住窗体的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

这篇文章主要介绍了react配置antd按需加载的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

js打开新窗口的方法有很多,本文大致整理了一些,需要的朋友可以参考下

下面小编就为大家带来一篇js style.display=block显示布局错乱问题的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这篇文章主要为大家介绍了js面向对象编程,感兴趣的小伙伴们可以参考一下

这篇文章主要介绍了js 图片转base64的方式(两种),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

鉴于UI妹妹每次交付过来的选项卡都夹带了多多少少的js,而且每遇到选项卡就加一点js,造成垃圾低劣代码逐渐堆积过多了,一直想做一个通用简洁的选项卡库。

Base64编码加密JS代码网页版,在文本框中输入任意字符串,即可将该字符串按Base64编码进行加密,也可将任意Base64编码的字符解密显示正常值

这篇文章主要介绍了JS中dom0级事件和dom2级事件的区别介绍,非常有参考价值,特此分享到脚本之家平台供大家参考

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下


扫描二维码分享到微信

在线咨询
联系电话

020-66889888