微信小程序(一)简单的结构及样式演示

这篇具有很好参考价值的文章主要介绍了微信小程序(一)简单的结构及样式演示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注释很详细,直接上代码

涉及内容:

  1. view和text标签的使用
  2. 类的使用
  3. flex布局
  4. 水平方向上均匀分布子元素
  5. 垂直居中对齐子元素
  6. 字体大小
  7. 文字颜色
  8. 底部边框的宽和颜色

源码:

index.wxml

<view class="navs">
    <text class="active">精选</text>
    <text>手机</text>
    <text>食品</text>
    <text>内衣</text>
    <text>生鲜</text>
    <text>母婴</text>
</view>

index.wxss

.navs{
    display: flex;
    justify-content: space-evenly;
    background-color: pink;
    height:40px;
    align-items: center;
    font-size: 14px;
}

.active{
    color: #37b626;
    border-bottom: 1px solid #00b26a;
}

效果演示:

微信小程序(一)简单的结构及样式演示,微信小程序,微信小程序,小程序
下一篇文章来源地址https://www.toymoban.com/news/detail-790310.html

到了这里,关于微信小程序(一)简单的结构及样式演示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序-----wxss模版样式

    目录 前言 一、WXSS 1. 什么是 WXSS 2. WXSS 和 CSS 的关系 二、rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 px 之间的单位换算 三、样式导入 1. 什么是样式导入 2. @import 的语法格式 四、全局样式和局部样式 1. 全局样式 2. 局部样式         上一期我们学习了wxml的模版语法,

    2024年01月17日
    浏览(67)
  • 微信小程序修改placeholder样式

    微信小程序有既定的修改placeholder的标签

    2024年04月10日
    浏览(58)
  • 微信小程序 样式和全局配置

    wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配 推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数 导入外部样式表  样式  权重一样时,局部样式可以覆盖全局样式 导航栏区域 navigationBar 背景区域 backgroud 页面主体区域 可以配置【导

    2024年02月07日
    浏览(51)
  • 微信小程序 movable-area 区域拖动动态组件演示

    movable-area 组件在小程序中的作用是用于创建一个可移动的区域,可以在该区域内拖动视图或内容。这个组件常用于实现可拖动的容器或可滑动的列表等交互效果。 使用 movable-area 组件可以对其内部的 movable-view 组件进行拖动操作,可以通过设置不同的属性和事件来自定义拖动

    2024年02月03日
    浏览(48)
  • 【微信小程序创作之路】- 小程序常用页面样式

    第四章 微信小程序用页面样式 本章节主要讲解,小程序中常用样式,涉及到WXML和WXSS文件。例如:页面布局、整体样式、按钮、图片轮播、条件渲染(wx:if wx:for)等。 微信小程序顶层的app.wxss文件,代表小程序全局样式,作用于所有页面。采用CSS语法设置页面样式。 🧀我们

    2024年02月16日
    浏览(61)
  • 微信小程序查看官方样式及修改checkbox样式为圆圈

    小程序中checkbox的样式是正方形的,设计图上给的是一个圆圈,在查看官方demo的时候发现了怎么修改的 首先在微信官方文档上找到复选框的demo 然后审查代码找到复选框的样式部分 可以看到选中的复选框的class为wx-checkout-input 选中的样式为wx-checkbox-input-checked 这样我们就可以

    2024年02月03日
    浏览(58)
  • 微信小程序的标签及常见样式

    view 类似div 块状元素 可设置 宽高! 横向滑动 标签组件: swiper和swiper-item(单个页面) 一般都是照片! 视屏和音频都可不行,上传代码包大小有限制! swiper组件常用属性: 竖向滑动 组件: scroll-view 滚动的视图容器 必须给个固定高度! text标签 类似HTML中span标签 是个行内标签! 该标签只

    2024年02月09日
    浏览(63)
  • 微信小程序修改vant组件样式

    1 背景 在使用vant组件开发微信小程序的时候,想更改vant组件内部样式,达到自己想要的目的(van-grid组件改成宫格背景色为透明,默认为白色),官网没有示例,通过以下几步修改成功。 2 步骤 2.1 查看官方文档 Grid 外部样式类 支持修改Grid组件样式,我们在组件上添加该属

    2024年02月09日
    浏览(75)
  • 微信小程序:去掉button默认样式

    去除button默认样式: 实例: 分享按钮 用户需要点击按钮分享当前页面,不过按钮样式需要自定义 通过绝对定位,让button在自定义元素之上,以便用户点击

    2024年02月08日
    浏览(56)
  • 微信小程序text文本样式(1)

    微信小程序的text组件支持以下样式属性: color:设置字体颜色,可选值为任意合法的CSS颜色表示形式,如\\\"#000000\\\"、\\\"rgb(255, 0, 0)\\\"等。 font-size:设置字体大小,可选值为长度单位(如\\\"12px\\\"、\\\"1rem\\\")或百分比(如\\\"100%\\\")。 font-weight:设置字体粗细,可选值为\\\"normal\\\"、\\\"bold\\\"、\\\"bolder

    2024年02月05日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包