微信小程序 常用属性笔记

因长期不进行weapp开发，基础属性做个记录。

获取屏幕大小

wx.getSystemInfoSync().windowWidth

行属性

display:flex; flex-direction:row;

列属性

display:flex; flex-direction:column;

列居中

align-items:center;

行居中

justify-content:center;

水平两端显示

justify-content:space-between;

水平等比显示

flex-direction:space-bround; flex:1;

文本下划线、删除线

text-decoration:underline; //下划线 text-decoration:line-through;//删除线

悬浮层位置控制

position:fixed; bottom:0;//底部显示 top:0;//右边显示 left:0;//左边显示 right:0;//右边显示

圆角显示

border-top-left-radius:7px;//左上角圆角 border-top-right-radius:7px;//右上角圆角 ......

动态class或者style判断（单引号、双引号使用）

wxss .text-nor{} .text-pre{} wxml <text class="{{id==1?'text-pre':'text-nor'}}"></text>

保持手机不锁屏

wx.setKeepScreenOn({ keepScreenOn:true, })

本地json

//新建json.js文件 var localJson = [ {"id":1, "name":'zhangsan'}, {"id":2, "name":'lisi'} ] moudle.exports={ postList:localJson} //js页面读取 var postJson=require("../../jsondata/json.js"); var jsonList = postJson.postList; Page({ data:{ list:jsonList }, itemClick:funciton(e){ var id = e.currentTarget.dataset.id; wx.showToast( 'title':id ) } })

列表页面

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="this"> <text data-id="{{item.id}}" bindtap="itemClick">{{item.name}}</text> </view>

圆圈背景的消息数量通知

<view class='text-msg-bg center-x-y'> <text class='text-msg center-x-y'>1</text> </view> .text-msg-bg { width: 24px; height: 24px; background: red; border-radius: 50%; } .center-x-y { display: flex; justify-content: center; align-items: center; } .text-msg { color: white; font-size: 14px; padding: 2px; }

比较好用的图表（感谢作者分享） 如：饼状图、环状图、条形图、折线图等 https://blog.csdn.net/m0_37805167/article/details/75160063