I feel like I can be free for a few days, I have saved a backup, and I have not sorted out the actual problems encountered in many projects. First, I will sort out the wxss (that is, css) public style (I will build my own website later). If you have any suggestions and
questions , Welcome to leave a message, and I will definitely give feedback in time when I see it
Note: I personally like to add prefixes of different categories to public styles (for example: app-, maskCom-, etc.). )
The style will be updated in time~~~
basic common style
page {color: #000;background-color: #f2f2f2;} /*全局设置所有页面属性*/
image {width: 100%;height: 100%;}
text {color: #000;} /*text可复制类颜色*/
rich-text {color: #000;} /* 需要转码文本（行数间需要空格则后台转码div便签间加<br />）*/
/* 表单类 */
input {color: #000;}
textarea {color: #000;width: 100%;}
.input-placeholder {color: #DEDFE5;} /*表单placeholder默认样式*/
button {margin:0;paading:0;line-height:staic;} /* 如需清空button样式 */
button:after{border:none;} /* 处理button默认边框 */
button[disabled] {background-color: #D0CBC5!important;color: #ECE9E6!important;}/*按钮不可点击时的默认样式，必须强制改;*/In fact, H5 css is also available styles
.app-dn {display: none;}
.app-db {display: block;}
.app-fl {float: left;}
.app-fr {float: right;}
.app-overflow {overflow: hidden;}
/* 设置一致性按钮 */
.app-btn {height: 92rpx;font-size: 36rpx;color: #fff;background-color: #FFBA17;border-radius: 100rpx;line-height: 92rpx;border: none;}
/* 最多显示几行 */
.app-maxRow {text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;
/* -webkit-line-clamp: 2; 行数单独设置 */The size of the text is for self-adaptation and for the convenience of copying. After all, it takes a lot of trouble to make each one large (basically, except for the highlighted text, everything else needs to use an adaptive font size)
/* 文字 rpx */
.app-fz16 {font-size: 16rpx;}
.app-fz18 {font-size: 18rpx;}
.app-fz20 {font-size: 20rpx;}
.app-fz22 {font-size: 22rpx;}
.app-fz24 {font-size: 24rpx;}
.app-fz26 {font-size: 26rpx;}
.app-fz28 {font-size: 28rpx;}
.app-fz30 {font-size: 30rpx;}
.app-fz32 {font-size: 32rpx;}
.app-fz36 {font-size: 36rpx;}
.app-fz40 {font-size: 40rpx;}
.app-fz48 {font-size: 48rpx;}
/* 背景颜色 */
.app-bg-mainTonal {background-color: #FFBA17;} /*主背景色*/The public styles of some tool classes will be sorted out separately later (will be put here temporarily)
——————————————————————————————————————————————————————
Here are some tool-like styles (with wxml)
<view class='app-my-list list-单个名字' catchtap='goWhatPage'>
<view class='app-list-l'>
<image src='/img/mm.png'></image>
<text>单个list名字</text>
</view>
<view class='app-list-r'>
<image src='/img/right.png' class='appp-list-r'></image>
</view>
</view> wxml ↑↑↑ wxss↓↓↓
/* 个人中心list WXSS*/
.app-my-list {width: 100%; height: 90rpx;font-size: 32rpx;display: flex;justify-content: space-between;padding: 20rpx 40rpx;background-color: #fff;color:#1D1507;align-items: center;box-sizing:border-box;margin-bottom: 35rpx;}
/* 右箭头 */
.app-rightIcon {width: 10rpx;height: 18rpx;margin-left:15rpx;}
.app-list-l {}
.app-list-l image {width: 40rpx;height: 40rpx;vertical-align: middle;margin-right: 15rpx;}
.app-list-l text {vertical-align: middle;}
.app-list-r {}
.app-list-r image{width: 20rpx;height: 20rpx;}The list can also define data by itself and then display it in a loop. It should be noted that the custom attribute data-id="{{difference ID}}" must be passed in. The specific method is not written here. Here is the common style code
custom popup
wxml(html)
<view class='app-mask-bg {
{"是否显示"?"db":"dn"}}' wx:if="{
{1==1}}">
<view class='app-mask-box'>
<view class='app-mask-content overflow maskNameClass'>
maskNameClass 为单独弹窗类名 宽高需自己设置，可改是否居中（56%）
</view>
<image src='/pages/img/closeMask.png' class='app-closeImg mask01-close' catchtap='closeMask01'></image>
</view>
</view>wxss(css)
.app-mask-bg { position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color:rgba(0, 0, 0, 0.7);z-index: 600;}/* 背景遮罩层 */
.app-mask-box {position: absolute;top: 56%;left: 50%;transform: translate(-50%,-50%);z-index: 900;}/* 盒子BOX */
.app-mask-content {background-color: #fff;border-radius: 10rpx;color: #000;overflow: hidden;} /* 内容 */
.app-closeImg {width: 65rpx;height: 65rpx;display: block;margin: 0 auto;margin-top: 30rpx;}/* 关闭弹窗按钮 */Attached are the default settings of the WeChat applet:
text
Nodes other than text nodes cannot be long-pressed to select.
button
input
textarea
image
canvas
In addition, components such as swiper must have width and height
In the later period, the tool class may be separated out to organize a blog separately
//-----------------------------------------------------------------------------------------------------------
// For the above pictures, you need to add pictures yourself to see the effect (just copy the code directly, just pay attention to changing the name of the picture)
-------------- Please indicate the source for reprinting, the copyright belongs to the author. For commercial reprint, please contact the author for authorization, for non-commercial reprint, please indicate the source. ----------------------------