小程序wxss公用模板

最新推荐文章于 2025-05-23 01:37:07 发布

原创最新推荐文章于 2025-05-23 01:37:07 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

5 篇文章

订阅专栏

本文探讨了如何在小程序开发中实现wxss样式的复用，通过创建公共模板来提升代码效率和样式一致性。介绍了创建及使用wxss全局样式文件，以及模块化管理样式的方法，帮助开发者优化小程序的样式结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text,view,swiper,icon,
button,checkbox-group,checkbox,
input,label,picker,radio-group,radio,slider,switch,textarea,
navigator,image,video,audio,map{
    box-sizing: border-box;
}

page{
    background-color: #eef1f7;
    box-sizing: border-box;
}
.flex-box{
    display: flex;
}
.flex-1{
    flex: 1;
}
.flex-2{
    flex: 2;
}
.flex-3{
    flex: 3;
}
.flex-4{
    flex: 4;
}
.flex-5{
    flex: 5;
}

/* 占用空白空间  */
.marin-topbottom120{
    margin-top: 120rpx;
    margin-bottom: 120rpx;
}
.empty-120box{
    width: 100%;
    height: 120rpx;
}
.fixed-bottom100{
    position: fixed;
    bottom: 0;
    width: 100%;
    line-height: 100rpx;
    height: 100rpx;
    z-index: 999;
}

/* 清空默认button 样式  */
button{
    position: relative;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    line-height: 100rpx;
    background-color: #fff;
    border: none;
    border-radius: 0;
}
button::after,
button::before{
    content: '';
   border: none;
}

.fl{float: left;}
.fr{float: right;}
.clearfix:after{
    content: "";
    clear: both;
    display: block;
}


/*  去查看等多的小箭头  */
.gomore-icon{
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    display: inline-block;
    width: 20rpx;
    height: 20rpx;
    border-right: 5rpx solid #c7c7cc;
    border-bottom: 5rpx solid #c7c7cc;
    transform: rotate(-45deg);
}

/* 高度使用的 搜索框  */
.top-search{
    display: flex;
    position: relative;
    padding: 20rpx 30rpx 20rpx 30rpx;
    width: 100%;
    height: 100rpx;    
    background-color: #eeeef4;
    vertical-align: middle;
    border-bottom: 1px solid #e5e5e5;
}
.top-search .input-box{
    position: relative;
    flex: 6;
}
.top-search .input-box input{
    padding: 0 70rpx;
    height: 60rpx;
    line-height: 60rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-radius: 4rpx;
    text-align:left;
}
.top-search .input-box .search-icon{
    position: absolute;
    top: 15rpx;
    left: 22rpx;
    width: 30rpx;
    height: 30rpx;
}
.top-search .input-box .scan-add{
    position: absolute;
    top: 10rpx;
    right: 20rpx;
    width: 40rpx;
    height: 40rpx;
}
.top-search .search-btn{
    flex: 1;
    font-size: 30rpx;
    line-height: 60rpx;
    color: #20a0ff;
    text-align: right;
}