首页 > 其他分享 >第四章总结（页面组件）

第四章总结（页面组件）

时间：2024-03-20 10:00:12浏览次数：20  
标签：item 组件 页面 data scroll 第四章 view

4.1 组件的定义及属性

      组件是页面视图层(WXML) 的基本组成单元, 组件组合可以构建功能强大的页面结构。 小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个) 基础组件。

     每一个组件都由一对标签组成, 有开始标签和结束标签, 内容放置在开始标签和结束标签之间, 内容也可以是组件。 组件的语法格式如下:

     <标签名 属性名=“属性值”>内容 ...</标签名>

     组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-*、bind*/catch*等。

     id  组件的唯一表示, 保持整个页面唯一, 不常用。

     class  组件的样式类, 对应WXSS中定义的样式。

     style  组件的内联样式, 可以动态设置内联样式。 

     hidden  组件是否显示, 所有组件默认显示。 

    data - ∗   自定义属性, 组件触发事件时, 会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset 方式来获取自定义属性的值。

    bind*/catch*   组件的事件, 绑定逻辑层相关事件处理函数。

4.2 内容视图组件

      容器视图组件是能容纳其他组件的组件, 是构建小程序页面布局的基础组件, 主要包括view、scroll-view和swiper组件。

     4.2.1 view

      view组件是块级组件, 没有特殊功能, 主要用于布局展示, 相当于html 中的div, 是布局中最基本的用户界面(User Interface,UI) 组件, 通过设置view的CSS属性可以实现各种复杂的布局。 view组件的特有属性如表4-1 所示。

通过<view> 组件实现页面布局示例代码如下:

<view style="text-align: center;">默认flex布局</view>
<view style="display: flex;">
<view style="border:1px solid #f00;flex-grow: 1;">1</view>
<view style="border:1px solid #f00;flex-grow: 1;">2</view>
<view style="border:1px solid #f00;flex-grow: 1;">3</view>
</view>
<view style="text-align: center;">上下混合布局</view>
<view style="display: flex;flex-direction: column;">
<view style="border: 1px solid #f00;">1</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;">1</view>
<view style="display: flex;flex-direction: column;flex-grow: 1;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>

运行结果如下：

图4-1  view组件示例

    4.2.2 scroll-view

      通过设置scroll-view 组件的相关属性可以实现滚动视图的功能，其属性如表4-2所示。

       (１) 在使用竖向滚动时, 如果需要给 scroll-view组件设置一个固定高度, 可以通过WXSS设置height 来完成。

       (２) 请勿在 scroll-view 组件中使用 textarge、map、canvas、video 组件。

       (３) scroll-into-view属性的优先级高于 scroll-top。 

       (４) 由于在使用 scroll-view 组件时会阻止页面回弹, 所以在 scroll-view  组件滚动时无法触发onPullDownRefresh。

       (５) 如果要实现页面下拉刷新, 请使用页面的滚动, 而不是设置 scroll-view 组件。 这样做, 能通过单击顶部状态栏回到页面顶部。

       通过 scroll-view 组件可以实现下拉刷新和上拉加载更多, 代码如下:

wxml文件代码：

<view class="container"style="padding:0px">
<!-- 垂直滚动，这里必须设置高度 -->
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height: {{scrollHeight}} px;" class=" list " bind-scrollyolower="bindDownLoad"
bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item"wx:for="{{list}}">
<image class="img"src="{{z1}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_de-scription}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}"bindchange="loadingChange">
加载中...
</loading>
</view>
</view>

js文件代码：

var url ="http:/www.imooc.com/course/ajaxlist";
var page = 0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
var loadMore = function(that){
  that.setDate({
    hidden:false
  });
  wx.request({
    url: 'url',
    data:{
      page:page,
      page_size:page_size,
      sort:sort,
      is_easy:is_easy,
      lange_id:lange_id,
      pos_id:pos_id,
      unlearn:unlearn
    },
    success:function(res){
      //console.info(that.data.list);
      var list = that.data.list;
      for(var i = 0;i < res.data.list.length;i ++){
        list.push(res.data.list[i]);
      }
      that.setData({
        list:list
      });
      page ++;
      that.setData({
        hidden:true
      });
    }
  });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop:0,
    scrollHeight: 0
  },
  onl oad: function(){
    //这里要注意，微信的 scroll-view 必须设置高度才能监听滚动事件，所以需要在页面的 onl oad事件中为 scroll-view 的高度赋值
    var that = this;
    wx.getSystemInfo({
      success: function(res){
        that.setDate({
          scrollHeight:res.windowHeight
        });
      }
    }) ;
    loadMore(that);
  },
  //页面滑动到底部
  bindDownLoad:function(){
    var that = this;
    loadMore(that);
    console.log("lower");
  },
  scroll:function(event){
    //该方法绑定了页面滚动时的事件，这里记录了当前的position.y的值，为了在请求数据后把页面定位到这里
    this.setData({
      scrollTop:event.detail.scrollTop
    });
  },
  topLoad:function(event){
    //该方法绑定了页面滑动到顶部的事件，然后做页面上拉刷新
    page = 0;
    this.setData({
      list:[],
      scrollTop:0
    });
    loadMore(this);
    console.log("lower");
  }
})

wxss文件代码：

.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname{
  color: #aaa;
}
.usermotto{
  max-width: 200px;
}
/**/

scroll-view{
  width: 100%;
}
.item{
  width: 90%;
  height: 300rpx;
  margin: 20rpx auto;
  background: brown;
  overflow: hidden;
}
.item,img{
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
}
.title{
  font-size: 30rpx;
  display: block;
  margin: 30rpx auto;
}
.description{
  font-size: 26rpx;
  line-height: 15rpx;
}

 4.2.3 swiper

       swiper组件可以实现轮播图、图片预览、滑动页面等效果。 一个完整的swiper组件由< swiper/ > 和< swiper-item > 两个标签组成, 它们不能单独使用。 <swiper/ > 中只能放置一个或多<swiper-item / > , 若放置其他组件则会被删除; < swiper-item / > 内部可以放置任何组件, 默认宽高自动设置为100％。swiper组件的属性如表4-3 所示。

      <swiper-item / >组件为滑块项组件，仅可以被放置在<swiper/>组件中，宽高尺寸默认按100%显示。

     设置swiper组件，可以实现轮播图效果，代码如下：

<swiper indicator-dots='true' autoplay='true' interval='5000'du-ration='1000'>
<swiper-item>
<image src="/pages/image/z1.jpg" style="width: 100%"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/image/z1.jpg" style="width: 100%"></image>
</swiper-item>
<swiper-item>
  <image src="/pages/image/z1.jpg" style="width: 100%"></image>
</swiper-item>
</swiper>

运行结果如下：

 

      

4.3 基础内容组件

      基础内容组件包括icon、text和progress, 主要用于在视图页面中展示图标、文本和进度条等信息。

     4.3.1 icon

       icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性如表4 - 4 所示。

示例代码如下：

wxml文件代码：

<view>icon类型:
<block wx:for="{{iconType}}">
<icon type="{{item}}"/>{{item}}
</block>
</view>
<view>icon大小:
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>{{item}}
</block>
</view>
<view>icon颜色:
<block wx:for="{{iconColor}}">
<icon type="success" size="30" color="{{item}}"/>{{item}}
</block>
</view>

js文件代码：

Page({
  data:{
    iconType:["success","success_no_circle","info","warn","wait-ing","cancel","download","search","clear"],
    iconSize:[10,20,30,40],
    iconColor:['#f00','#0f0','#00f']
  }
})

运行结果如下：

 4.3.2 text

     text 组件用于展示内容, 类似 HTML 中的< span > , text  组件中的内容支持长按选中, 支持转义字符“ ＼”, 属于行内元素。 text 组件的属性如表 4- 5 所示。

 示例代码如下：


<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{19-x}}" wx:for-item="y">
<text decode="{{true}}" space="true">&nbsp;&nbsp;</text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=2*x-1}}">
<text>*</text>
</block>
</block>
</view>
</block>
 
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{27+x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}">&nbsp;</text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=11-2*x}}">
<text>*</text>
</block>
</block>
</view>
</block>

运行结果如下：

4.3.3 progress

    progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素，其属性表 4- 6 所示。

   

 示例代码如下：

<view>显示百分比</view>
<progress percent='80' show-info='80'></progress>
<view>显示宽度</view>
<progress percent='50' stroke-width='2'></progress>
<view>自动显示进度条</view>
<progress percent='80' active></progress>

运行结果如下：

 4.4 表单组件

      表单组件的主要功能是收集用户信息, 并将这些信息传递给后台服务器, 实现小程序与用户之间的沟通。 表单组件不仅可以放置在< from/ > 标签中使用, 还可以作为单独组件和其他组件混合使用。

    4.4.1 button

      button 组件用来实现用户和应用之间的交互, 同时按钮的颜色起引导作用。 一般来说,在一个程序中一个按钮至少有３ 种状态: 默认点击(default)、建议点击(primary)、谨慎点击(warn)。在构建项目时, 应在合适的场景使用合适的按钮, 当< button > 被< from/ > 包裹时, 可以通过设置from － type 属性来触发表单对应的事件。 button 组件的属性如表4-7所示。

示例代码如下： 

<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bindtap='buttonSize' size="{{size}}">改变size</button>
<button type="default" bindtap='buttonPlain' plain="{{plain}}">改变plain</button>
<button type="default" bindtap='buttonLoading' loading="{{loading}}">改变loading</button>

Page({
  data:{
    size:'default',
    plain:'false',
    loading:'false'
  },
  //改变按钮的大小
  buttonSize:function(){
    if(this.data.size =="default")
    this.setData({size:'mini'})
    else
  this.setData({size:'default'})
  },
  //是否显示镂空
  buttonPlain:function(){
    this.setData({plain: ! this.data.plain})
  },
  //是否显示loading图案
  buttonLoading:function(){
    this.setData({ loading:! this.data.loading})
  }
})

运行结果如下：

4.4.2 radio

      单选框用来从一组选项中选取一个选项。在小程序中, 单选框由< radio-group/ > (单项选择器) 和< radio/ > ( 单选项目) 两个组件组合而成, 一个包含多个< radio/ > 的< radio-group/ / > 表示一组单选项, 在同一组单选项中< radio/ > 是互斥的, 当一个按钮被选中后, 之前选中的按钮就变为非选。 它们的属性如表４ －８ 所示。 

     

     

 

      

标签：item,组件,页面,data,scroll,第四章,view
From： https://blog.csdn.net/weixin_74842051/article/details/136801317

相关文章

  • ssts-hospital-web-master项目实战记录五十：项目迁移-页面模块实现（主框架-文件结构）
    记录时间：2024-03-20文件结构 翻译搜索复制......
  • Collider和Rigidbody组件相关
    Rigidbodydynamic类型开销最大的类型拥有完整的功能（现实世界相同的物体）会和所有类型的刚体碰撞会受到各种力的影响kinematic类型仍然通过速度移动但并不受到任何力的影响也只会与dynamic发生碰撞，发生碰撞时近似于无限质量的物体（不会改变运动状态）static类型本意......
  • nicelog--强大的Java日志组件，排查问题的利器
    ​ nicelog是一个功能强大的Java日志组件，它可以自动、手动收集日志，并通过traceId将日志关联起来，可极大提高排查问题的速度。官网：https://www.yuque.com/knifeblade/opensource/niceloggitee：https://gitee.com/knifeedge/niceloggithub：https://github.com/knife-blade/nicelog......
  • 摄像头组件2- 图像传感器
    目录概述1.公司背景介绍2.公司产品线介绍3.ARO233介绍4.特性5.实例参考链接概述    本文以安美森的AR0233为例,介绍"车载摄像头模组"子组件2-cmos图像传感器 1.公司背景介绍        公司:安森美半导体(ONSemiconductor）      ......
  • pinia在登录页面持久化存储
    安装pinianpminstallpinia创建一个store/index.jsimport{createPinia}from'pinia'//从pinia模块导入createPinia函数。Pinia是Vue.js的一个状态管理库，createPinia函数用于创建一个新的Pinia实例importpiniaPluginPersistfrom'pinia-plugin-persist'//pinia-plug......
  • 【Lazy ORM】 小工具 acw 本地客户端 你负责点击页面，他负责输出代码
    介绍wu-smart-acw-client简称acw-client，是一个基于LazyORM定制的客户端代码生成小工具LazyORM小工具acw本地客户端你负责点击页面，他负责输出代码安装<dependency><groupId>top.wu2020</groupId><artifactId>wu-smart-acw-cli......
  • 微信小程序(组件通信)
            ......
  • 微信小程序(组件生命周期)
         ......
  • vue2结合element UI组件库封装的搜索组件
    可以根据不同的搜索条件自动排版，分为一个搜索条件，2-4个搜索条件，大于5的搜索条件具体样例见下方 封装的组件库：el-seacher.vue<template> <divv-if="!isModalSearch"class="searchFormborder-basic":class="isHeaderSearch?'headerBack':'whiteBtnBgd'&q......
  • 界面组件DevExpress WinForms v23.2 - 数据可视化功能升级
    DevExpressWinForms拥有180+组件和UI库，能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！DevExpressWinForms控件日前正式发布了v23.2，此版......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99