微信小程序常用属性笔记

因长期不进行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-directionspace-bround;
flex:1;

悬浮层位置控制

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

微信小程序 常用属性笔记

猜你喜欢

微信小程序常用属性笔记