微信小程序中的基础标签

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

一、什么是微信小程序中的标签

  • 小程序标签是指微信小程序页面中的不同组件,用于展示和处理数据。
  • 小程序标签由结构标签、样式标签和逻辑标签三部分组成,分别对应页面的结构、样式和逻辑。
  • 小程序标签具有良好的兼容性,可以在不同品牌、不同型号的手机上正常运行。

二 、基础标签

1.view标签:用于展示文本、图片、组合等元素,类似于HTML的div标签。

2.text标签:用于设置文本的字体、大小、颜色等样式。

 <view>
    <text>1111</text>
    <image src="image.png"></image>
    <view>2222</view>
  </view>

3.scroll-view标签:用于展示可滚动的区域,可以设置横向或纵向滚动。

  <scroll-view scroll-x="true">
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </scroll-view>

3、swiper标签:用于展示可滑动的轮播图。

swiper有很多的属性可以配置,具体可以去文档中看

<swiper>
    <swiper-item><image src="image1.png"></image></swiper-item>
    <swiper-item><image src="image2.png"></image></swiper-item>
    <swiper-item><image src="image3.png"></image></swiper-item>
  </swiper>

4.button标签:用于创建按钮,可以设置背景颜色、边框、圆角等样式,跟Html中基本一样

5.image标签:用于展示图片,可以设置宽度、高度、模式等样式。

6.input标签:用于输入框,可以处理输入事件和变化事件。

注:想要获取input输入框中的值必须使用bindinput绑定一个方法,用该方法来接受值

  <input type="text" bindinput="inputHandler"  value="{{text}}" />
  Page({
    data: {
      text: ''
    },
    inputHandler: function(e) {
      this.setData({
        text: e.detail.value
      })
    }
  });

7.navigator标签:用于跳转页面,可以设置url、目标页面等参数。

在微信小程序中有两种导航方式

navigator为声明式导航(跟Html中的a标签一样直接在属性中定义要跳转的链接)

编程式导航:通过方法来跳转:如下文章来源地址https://www.toymoban.com/news/detail-797703.html

<button bindtap="gotoMessage"></button>
gotoMessage(){
   wx.switchTab({
       url:"/pages/group/group"
    })
}

到了这里,关于微信小程序中的基础标签的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序--几个常用标签

    view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下,宽度100%); text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下,不会独占一行,宽和高由内容撑开,这个时候你设置宽高是没有用的); image 这个标签比较重要,图片组件。src里面可以放网络

    2024年02月08日
    浏览(39)
  • 微信小程序image标签的使用

    在小程序中,我们可以使用 image 标签来添加图片。 image 标签有以下属性: src :图片路径,可以是本地路径或网络路径 mode :图片裁剪、缩放的模式,默认为\\\"scaleToFill\\\"(缩放以填充整个容器) 添加指向本地图片的 src 属性后的显示效果: image 标签默认会根据图片的宽高自适

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

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

    2024年02月09日
    浏览(62)
  • 微信小程序中识别html标签的方法

    在微信小程序中有一个组件rich-text可以识别文本节点或是元素节点 具体入下: 详情可以参考官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

    2024年02月09日
    浏览(44)
  • 微信小程序简单输入框界面(实现选择标签功能)

    1、js代码: 2、wxml代码: 3、wxss代码: 布局简单,对于初学者可以用来看看,随便写的,如果出现运行异常,请使用真机预览呦~

    2024年03月12日
    浏览(81)
  • 微信小程序使用van组件Tabbar 标签栏

    (1)打开我们小程序的项目目录,然后打开文件所在的位置。 (2)cmd 窗口初始化 (3)通过 npm 安装vant/weapp (4)安装 miniprogram (5)修改 app.json app.json 中的 “style”: “v2” 去除 (6)修改 project.config.json 开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在

    2024年02月06日
    浏览(42)
  • 【微信小程序】解决text标签文字不居中问题

    我在text标签上的view父标签中写了smbox样式,也就是说text标签会继承text-align这个属性 但是Python啊Django啊三个字以上的文字要不就是超出格子,要不就掉到下一行了。怎么看都不舒服。 在text标签中添加 margin:-150rpx 就能将以上的文字调整到中间 上面在text标签中写了text-align也试

    2024年02月11日
    浏览(65)
  • 微信小程序加载html标签(解析html标签、wxParse加载富文本html)

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(46)
  • 微信小程序——标签wxml、样式wxss、js、json

    之前学过HTML,里面常用的标签是div、span、img、a,现在小程序里面wxml文件里面写结构,相对应的写法是: div—— view span—— text img—— image a—— navigator 比如跳转: navigator url=\\\"/pages/index/index\\\"/navigator 小程序里的样式wxss和之前的学过的css样式有一些区别: 新增了rpx单位,这

    2024年02月11日
    浏览(59)
  • 微信小程序 — tag标签设置选中效果和未选样式

     实现如上图效果 。选中效果和未选中效果实现。 1.wxss文件。设置css样式。选中效果样式和默认的效果样式。 stateChoose选中样式。  stateNotchoose未选中(默认)样式 2.wxml文件。布局实现 3.js文件,数据绑定。监听事件。  

    2024年02月11日
    浏览(61)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包