wxss样式——持续更新

最新推荐文章于 2024-06-16 09:33:39 发布
最新推荐文章于 2024-06-16 09:33:39 发布
阅读量1.5k 收藏 10
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43201403/article/details/104560122
版权

一. 立一个flag
微信小程序一般的功能实现说实话，还是挺简单的，网上有很多可以借鉴然后copy修改，但是样式设置特别复杂。这一篇文章我会不断扩充，因为需要记住的样式太多了，需要不断积累。

在这里补充一个很重要的知识点：
在这里插入图片描述

二. 样式

1.第一种
xwml代码展示

<view class='selection'>
  <view class='header'>
    <text>精品推荐</text>
    <text class='all'>全部精品</text>
  </view>

  <view class='content'>
    <view class='content-item' wx:for='{{contentItem}}' wx:key="key">
      <image src='../images/matcha.jpg'></image>
      <view class='content-item-introduction'>这里是内容介绍</view>
    </view>
  </view>
</view>

wxss代码展示

/* 每一个大view底部有灰色分隔线 */
.selection{
  border-bottom: 4px solid #ddd;
}

.header{
  /* 精品推荐  左边框线条加粗，固体和绿色 */
  border-left-width: 2px; 
  border-left-style:solid;
  border-left-color: green;
  /* 水平布局，中间对齐 */
  display: flex;
  justify-content: space-between;
  /* 元素中心点居中对齐 */
  align-items: center;
  height: 70rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-top: 20rpx;
}

.all{
  color:green;
  font-size: 10px;
}

.content{
  /* 水平方向居中对齐 */
  display: flex;
  justify-content: center;
  /* 元素宽度不够时，自动换到下一行 */
  flex-wrap: wrap;
}

.content-item{
  width: 45%;
  height: 250rpx;
  background-color:goldenrod;
  /* 元素间的间距，包括上下左右 */
  margin: 2px;
  /* 这里的定位是为了当作content-item-introduction内容的父本 */
  position: relative; 
}

/* 元素内的图片格式设置为全部填满 */
.content-item image{
  width: 100%;
  height: 100%;
}

.content-item-introduction{
  /* 绝对定位，以父本来作为定位 */
  position: absolute;
  bottom: 0px;
  color: white;
  font-size: 12px;
  /* 设置渐变色，从底部开始从黑色变成白色，rgba最后一个参数代表透明度 */
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));
  /* text内容设置为item元素一半高度，长度填满 */
  height: 125rpx;
  width: 100%;
  /* 设置主轴方向为竖轴，并且元素从底部开始 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 距离底部1% */
  padding-bottom: 1%;
}

效果展示
中间的那块区域就是效果展示，可以看到上面是文字“精品推荐”“全部精品”，以及最左边是一条小绿杠，中间是四张图片，每一张都是相隔间距，并且每一张图片中间是有内容介绍的，内容介绍的背景颜色是渐变色，从底部开始逐渐变白，最下面是灰色的分隔线，清晰明了。
在这里插入图片描述
2.第二种
wxml代码展示

<view>
  <view class='header'>
    <text>热门推荐</text>
    <text class='all'>全部热门</text>
  </view>

  <view class='list'>
    <view class='list-image'>
      <image src='../images/chocolate.jpg' class='list-image-back'></image>
      <image src='../images/portrait.jpg' class='list-image-portrait'></image>
    </view>

    <view class='list-text'>
      <view class='list-text-title'>
        <text>标题标题标题</text>
      </view>
      <view class='list-text-content'>
        <text>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</text>
      </view>
    </view>
  </view>
</view>

wxss代码展示

.list{
  width: 100%;
  height: 500rpx;
}
.list-image{
  width: 100%;
  height: 300rpx;
  position: relative;
}
.list-image-back{
  width: 100%;
  height: 100%;
}
.list-image-portrait{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: absolute;
  bottom: -50rpx;
  right: 20rpx;
}
.list-text{
  width: 100%;
  height: 200rpx;
}
.list-text-title{
  font-size: 15px;
  color: black;
  margin-top: 20rpx;
}
.list-text-content{
  font-size: 12px;
  color: gray;
  margin-top: 20rpx;
}

效果展示
上面部分已经讲述过了，中间部分就是一张图片，最下面就是内容描述，最有意思的就是中间图片有一个小头像，这是我第一次学会使用小头像。
在这里插入图片描述
3.第三种
xwml代码展示

<!-- 滚动栏 -->
<swiper class='swiper' autoplay="true" circular="true" interval="3000" duration="1000" indicator-dots="true">
  <block wx:for="{{swiperImage}}" wx:key="key">
    <swiper-item>
      <image src="{{item}}" mode='aspectFill' />
    </swiper-item>
  </block>
</swiper>

<!-- 商品导航栏 -->
<van-tabs active="{{ active }}" bind:change="onChange">
  <!-- 滚动选项 -->
  <van-tab title="手机电脑">
    <!-- 滚动商品 -->
    <block wx:for="{{goodslist1}}" wx:key='key'>
      <view class='card-main'>
        <van-card tag="{{item.tag}}" price="{{item.price}}" desc="{{item.desc}}" title="{{item.title}}" thumb="{{item.imageUrl}}">
        </van-card>
        <view class='select-main'>
          <button class='collection' id="{{item.id}}" bindtap='addcart1'>收藏</button>
          <van-stepper value="{{ 1 }}" id="{{item.id}}" bind:change="onChange" />
          <button class='buy' id="{{item.id}}" bindtap='buyGoods1'>购买</button>
        </view>
      </view>
    </block>
  </van-tab>

  <van-tab title="二手车">
    <!-- 滚动商品 -->
    <block wx:for="{{goodslist2}}" wx:key='key'>
      <view class='card-main'>
        <van-card tag="{{item.tag}}" price="{{item.price}}" desc="{{item.desc}}" title="{{item.title}}" thumb="{{item.imageUrl}}">
        </van-card>
        <view class='select-main'>
          <button class='collection' id="{{item.id}}" bindtap='addcart2'>收藏</button>
          <van-stepper value="{{ 1 }}" id="{{item.id}}" bind:change="onChange" />
          <button class='buy' id="{{item.id}}" bindtap='buyGoods2'>购买</button>
        </view>
      </view>
    </block>
  </van-tab>

  <van-tab title="家电产品">
    <!-- 滚动商品 -->
    <block wx:for="{{goodslist3}}" wx:key='key'>
      <view class='card-main'>
        <van-card tag="{{item.tag}}" price="{{item.price}}" desc="{{item.desc}}" title="{{item.title}}" thumb="{{item.imageUrl}}">
        </van-card>
        <view class='select-main'>
          <button class='collection' id="{{item.id}}" bindtap='addcart3'>收藏</button>
          <van-stepper value="{{ 1 }}" id="{{item.id}}" bind:change="onChange" />
          <button class='buy' id="{{item.id}}" bindtap='buyGoods3'>购买</button>
        </view>
      </view>
    </block>
  </van-tab>

  <van-tab title="体育用品">
    <!-- 滚动商品 -->
    <block wx:for="{{goodslist4}}" wx:key='key'>
      <view class='card-main'>
        <van-card tag="{{item.tag}}" price="{{item.price}}" desc="{{item.desc}}" title="{{item.title}}" thumb="{{item.imageUrl}}">
        </van-card>
        <view class='select-main'>
          <button class='collection' id="{{item.id}}" bindtap='addcart4'>收藏</button>
          <van-stepper value="{{ 1 }}" id="{{item.id}}" bind:change="onChange" />
          <button class='buy' id="{{item.id}}" bindtap='buyGoods4'>购买</button>
        </view>
      </view>
    </block>
  </van-tab>

  <van-tab title="读本读物">
    <!-- 滚动商品 -->
    <block wx:for="{{goodslist5}}" wx:key='key'>
      <view class='card-main'>
        <van-card tag="{{item.tag}}" price="{{item.price}}" desc="{{item.desc}}" title="{{item.title}}" thumb="{{item.imageUrl}}">
        </van-card>
        <view class='select-main'>
          <button class='collection' id="{{item.id}}" bindtap='addcart5'>收藏</button>
          <van-stepper value="{{ 1 }}" id="{{item.id}}" bind:change="onChange" />
          <button class='buy' id="{{item.id}}" bindtap='buyGoods5'>购买</button>
        </view>
      </view>
    </block>
  </van-tab>

  <van-tab title="数码产品">
    <!-- 滚动商品 -->
    <block wx:for="{{goodslist6}}" wx:key='key'>
      <view class='card-main'>
        <van-card tag="{{item.tag}}" price="{{item.price}}" desc="{{item.desc}}" title="{{item.title}}" thumb="{{item.imageUrl}}">
        </van-card>
        <view class='select-main'>
          <button class='collection' id="{{item.id}}" bindtap='addcart6'>收藏</button>
          <van-stepper value="{{ 1 }}" id="{{item.id}}" bind:change="onChange" />
          <button class='buy' id="{{item.id}}" bindtap='buyGoods6'>购买</button>
        </view>
      </view>
    </block>
  </van-tab>

</van-tabs>

json代码

{
  "navigationBarTitleText": "校园市场",
  
  "usingComponents": {
    "van-tab": "../../miniprogram_npm/miniprogram_npm/@vant/weapp/tab/index",
    "van-tabs": "../../miniprogram_npm/miniprogram_npm/@vant/weapp/tabs/index",
    "van-card": "../../miniprogram_npm/miniprogram_npm/@vant/weapp/card/index",
    "van-button": "../../miniprogram_npm/miniprogram_npm/@vant/weapp/button/index",
    "van-stepper": "../../miniprogram_npm/miniprogram_npm/@vant/weapp/stepper/index"
  }
}

效果展示
这个页面其实盗用了第三方包，也就是vant样式，可以cmd到小程序项目里面用npm工具安装，具体教程我有一篇文章专门介绍的
在这里插入图片描述
4. 第四种
在这里插入图片描述
5. 第五种
在这里插入图片描述
在这里插入图片描述
6. 第六种
在这里插入图片描述
7. 第七种
在这里插入图片描述

街上人
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序的标签及常见样式
m0_57145412的博客
03-09 1万+
苏苏少年
微信小程序-wxss样式笔记（更新中）
长青
07-19 841
新手开发微信小程序时，在wxss中值得留意的地方
微信小程序wxml和wxss样式
热门推荐
zxhandroid的博客
04-18 2万+
对于css不熟悉的android程序员来说，开发微信小程序面临的一个比较困难的问题就是界面的排版了。微信小程序的排版就跟wxml和wxss有关了，它们两者相当于android的布局文件，其中wxml指定了界面的框架结构，而wxss指定了界面的框架及元素的显示样式。 一、wxml 界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
【小程序】WXSS模板样式
最新发布
lzb_kkk的博客
06-16 1227
wxss是什么，wxss和css之间的关系，rpx尺寸单位，样式导入@import，全局样式和局部样式，设置导航栏标题、背景色、标题文本颜色、下拉刷新效果、上拉触底距离设置，tabBar相关设置
微信小程序学习day02-WXSS 模板样式
qq_52031408的博客
04-30 1212
微信小程序学习day02-WXSS 模板样式
微信小程序WXSS 尺寸单位、样式导入、内联样式、选择器、全局样式与局部样式
timtian008的博客
01-17 1万+
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。与 CSS 相比我们扩展的特性有： 尺寸单位 样式导入 尺寸单位 rpx（responsive pixel）: 可
WXSS
齐枫的博客
09-23 9894
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比，WXSS 扩展的特性有： 尺寸单位 样式导入 尺寸单位 rp
微信小程序项目实例——备忘录
05-24
在微信小程序中，每个页面由对应的JSON配置文件、WXML结构文件、WXSS样式文件和JS业务逻辑文件组成。在这个备忘录项目中，这些文件协同工作，实现了备忘录功能的集成。 3. **文字记录功能**： 用户可以在备忘录中...
小程序DEMO——中国珠宝通
03-15
8. **持续维护与更新**：小程序上线后，需要持续收集用户反馈，对功能进行迭代升级，保持与用户的互动，以适应市场的变化。 9. **版权与法律问题**：DEMO中的免责声明提示，开发者需要注意版权问题，确保所使用的...
微信小程序项目实例——狼人杀
05-24
微信小程序基于 JavaScript、WXML（微信小程序标记语言）和 WXSS（微信小程序样式语言）进行开发。JavaScript 负责处理业务逻辑，WXML 提供结构化的视图层描述，而 WXSS 则用于定义样式规则。开发过程中，我们需要...
微信小程序——附近酒店.rar
09-29
发布后，还需要持续收集用户反馈，对小程序进行迭代更新，以满足用户不断变化的需求。 综上所述，“微信小程序——附近酒店”这个实例涵盖了小程序开发中的定位技术、搜索功能实现、用户界面设计、数据管理和后端...
微信小程序——仿小米有品.zip
11-01
- **WXSS**：微信小程序的样式层语言，类似于CSS，用于设置页面的样式。 - **JavaScript**：负责处理页面逻辑和数据绑定，与微信小程序框架交互。 2. 微信小程序框架： - 微信小程序提供了一套基于组件化开发的...
微信小程序 —— wxss设置样式
starter_____的博客
01-19 1万+
对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来 一、wxml 界面结构wxmL比较容易理解，主要是由八大类基础组件构成：   一、视图容器(View Container)： 二、基础内容(Basic Content) 组件名 说明 组件名 说明 view 视图容器 icon  图标 scroll-view 可滚动视图容器 text
微信小程序——好看的radio单选项框，wxml里列表中遍历数组获取id传回给js页面
wy313622821的博客
11-21 5219
微信小程序——好看的radio单选项框 效果图如下： .wxss代码： .view_container { display: flex; flex-direction: row; justify-content: space-around; margin-top:50rpx ; } /* 按钮未选中 */ .normal_button { background: white； } /* 按钮选中 */ .checked_button { background: #4
很漂亮的按钮样式
09-11 273
&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;title&gt;个比较好看的Button的CSS&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
【微信小程序】代码构成——WXSS样式
weixin_39068791的博客
07-30 1697
转载：https://developers.weixin.qq.com/miniprogram/dev/index.html WXSS 样式 WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ...
小程序view一次放置 背景图 背景颜色 图片自动居中
qq_40095973的博客
05-30 6595
css:.imageView{ height:60rpx; width: 60rpx; background: #4DA9EB url('http://app.maidiyun.com/weixin/images/enterprise_log.png') no-repeat center; }wxml:&lt;view class="imageView"&gt;&lt;/v...
微信小程序wxss公共样式
老街的酒香
02-18 8767
感觉可以闲几天，存了备份，还未整理许多项目中遇到的实际问题，先把的wxss(即css)公共样式整理上来（后期自己会搭建自己的网站） 如果各位有什么建议和问题，欢迎留言，看到一定会及时反馈 注：个人喜欢在公共样式加区别类的前缀（比如：app- 、 maskCom-等） 话不多说：先附代码了（为了方便复制，分开写了，复制即可用，里面含备注，可删） 样式会及时整理更新~~~ 基本公共样式 p...
微信小程序之左右布局
imherer的博客
10-04 4787
本文以一个简单的小例子，简述在微信小程序开发中左右布局功能的实现方式，主要涉及scroll-view ，列表数据绑定，及简单样式等内容，仅供学习分享使用。 概述 在微信小程序开发中，左右分栏（左边显示分类，右边显示明细，然后进行联动）是一种常见的布局方式，多应用于点餐，冷饮店，外卖，以及其他类似的商城。 布局分析 布局分析图示如下： 涉及知识点 scroll-view可滚动视图区域。使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。组...
微信小程序wxss 样式穿透
04-12
在wxss中，我们可以使用 ::shadow 选择器来实现样式穿透。 具体步骤如下： 1. 在父组件的wxss文件中定义一个class，并设置需要穿透的样式。 2. 在子组件的wxss文件中使用 ::shadow 选择器来选择父组件，并使用父...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值