Loading [MathJax]/jax/input/TeX/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >专栏 >【愚公系列】2022年03月 微信小程序-视图容器

【愚公系列】2022年03月 微信小程序-视图容器

作者头像
愚公搬代码
发布于 2022-12-01 01:13:50
发布于 2022-12-01 01:13:50
65300
代码可运行
举报
文章被收录于专栏：历史专栏历史专栏
运行总次数：0
代码可运行
关联问题
换一批

文章目录

前言

视图容器

名称

功能说明

cover-image

覆盖在原生组件之上的图片视图

cover-view

覆盖在原生组件之上的文本视图

match-media

media query 匹配检测节点

movable-area

movable-view的可移动区域

movable-view

可移动的视图容器，在页面中可以拖拽滑动

page-container

页面容器

scroll-view

可滚动视图区域

share-element

共享元素

swiper

滑块视图容器

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%

view

视图容器

一、cover-image

覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<cover-image src="图标路径，支持临时路径、网络地址、云文件ID" bindload="图片加载成功时触发" binderror="图片加载失败时触发">

二、cover-view

覆盖在原生组件之上的文本视图 可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
Page({
  onShareAppMessage() {
    return {
      title: 'cover-view',
      path: 'page/component/pages/cover-view/cover-view'
    }
  },

  data: {
    latitude: 23.099994,
    longitude: 113.324520,
  }
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-gap">
      <map
        style="width: 100%; height: 300px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
      >
        <cover-view class="cover-view">
          <cover-view class="container">
            <cover-view class="flex-wrp" style="flex-direction:row;">
              <cover-view class="flex-item demo-text-1"></cover-view>
              <cover-view class="flex-item demo-text-2"></cover-view>
              <cover-view class="flex-item demo-text-3"></cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
      </map>
    </view>
  </view>
</view>
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
.cover-view {
  position: absolute;
  top: calc(50% - 150rpx);
  left: calc(50% - 300rpx);
  /* opacity: .7; */
}

.flex-wrp{
  display:flex;
}

.flex-item{
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}

.demo-text-1 {
  background: rgba(26, 173, 25, 0.7);
}

.demo-text-2 {
  background: rgba(39, 130, 215, 0.7);
}

.demo-text-3 {
  background: rgba(255, 255, 255, 0.7);
}

三、match-media

media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
</match-media>

<match-media min-height="400" orientation="landscape">
  <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
</match-media>

四、movable-area和movable-view

movable-area和movable-view的可移动区域。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
Page({
  onShareAppMessage() {
    return {
      title: 'movable-view',
      path: 'page/component/pages/movable-view/movable-view'
    }
  },

  data: {
    x: 0,
    y: 0,
    scale: 2,
  },

  tap() {
    this.setData({
      x: 30,
      y: 30
    })
  },

  tap2() {
    this.setData({
      scale: 3
    })
  },

  onChange(e) {
    console.log(e.detail)
  },

  onScale(e) {
    console.log(e.detail)
  }
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<view class="container">

  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title first">movable-view区域小于movable-area</view>
      <movable-area>
        <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
      </movable-area>
    </view>
    <view class="btn-area">
      <button bindtap="tap" class="page-body-button" type="primary">点击移动到 (30px, 30px)</button>
    </view>

    <view class="page-section">
      <view class="page-section-title">movable-view区域大于movable-area</view>
      <movable-area>
        <movable-view class="max" direction="all">text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">只可以横向移动</view>
      <movable-area>
        <movable-view direction="horizontal">text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">只可以纵向移动</view>
      <movable-area>
        <movable-view direction="vertical">text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">可超出边界</view>
      <movable-area>
        <movable-view direction="all" out-of-bounds>text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">带有惯性</view>
      <movable-area>
        <movable-view direction="all" inertia>text</movable-view>
      </movable-area>
    </view>

    <view class="page-section">
      <view class="page-section-title">可放缩</view>
      <movable-area scale-area>
        <movable-view direction="all" bindchange="onChange" bindscale="onScale" scale scale-min="0.5" scale-max="4" scale-value="{{scale}}">text</movable-view>
      </movable-area>
    </view>

    <view class="btn-area">
      <button bindtap="tap2" class="page-body-button" type="primary">点击放大3倍</button>
    </view>
  </view>

</view>

五、page-container

页面容器。

小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
page {
  background-color: #f7f8fa;
  color: #323232;
  width: 100%;
  height: 100%;
}

.box {
  margin: 0 12px;
}

.title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
  text-align: center;
}

.btn {
  display: block;
  width: 100%;
  margin: 10px 0;
  background-color: #fff;
}

.detail-page {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
const app = getApp()

Page({
  data: {
    show: false,
    duration: 300,
    position: 'right',
    round: false,
    overlay: true,
    customStyle: '',
    overlayStyle: ''
  },
  onLoad: function () {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')

    
  },
  onShow() {
   
  },

  popup(e) {
    const position = e.currentTarget.dataset.position
    let customStyle = ''
    let duration = this.data.duration
    switch(position) {
      case 'top':
      case 'bottom': 
        customStyle = 'height: 30%;'
        break
      case 'right':
        break
    }
    this.setData({
      position,
      show: true,
      customStyle,
      duration
    })
  },

  changeRound() {
    this.setData({round: !this.data.round})
  },

  changeOverlay() {
    this.setData({overlay: !this.data.overlay, show: true})
  },

  changeOverlayStyle(e) {
    let overlayStyle = ''
    const type = e.currentTarget.dataset.type
    switch(type) {
      case 'black':
        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)'
        break
      case 'white':
        overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)'
        break
      case 'blur':
        overlayStyle = 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);'
    }
    this.setData({overlayStyle, show: true})

  },

  exit() {
    this.setData({show: false})
    // wx.navigateBack()
  },

  goTo(e) {
    wx.navigateTo({url: `../shareElement/index`})
  },

  onBeforeEnter(res) {
    console.log(res)
  },
  onEnter(res) {
    console.log(res)
  },
  onAfterEnter(res) {
    console.log(res)
  },
  onBeforeLeave(res) {
    console.log(res)
  },
  onLeave(res) {
    console.log(res)
  },
  onAfterLeave(res) {
    console.log(res)
  },

  onClickOverlay(res) {
    console.log(res)
  }
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<view class="title">弹出位置</view>
<view class="box">
  <button class="btn" bindtap="popup" data-position="right">右侧弹出</button>
  <button class="btn" bindtap="popup" data-position="top">顶部弹出</button>
  <button class="btn" bindtap="popup" data-position="bottom">底部弹出</button>
  <button class="btn" bindtap="popup" data-position="center">中央弹出</button>
</view>


<view class="title">弹窗圆角</view>
<view class="box">
  <button class="btn" bindtap="changeRound">设置{{round ? '直角' : '圆角'}}</button>
</view>

<view class="title">遮罩层</view>
<view class="box">
  <button class="btn" bindtap="changeOverlay">设置{{overlay ? '无' : '有'}}遮罩</button>
  <button class="btn" bindtap="changeOverlayStyle" data-type="black">黑色半透明遮罩</button>
  <button class="btn" bindtap="changeOverlayStyle" data-type="white">白色半透明遮罩</button>
  <button class="btn" bindtap="changeOverlayStyle" data-type="blur">模糊遮罩</button>

</view>


<page-container 
  show="{{show}}"
  round="{{round}}"
  overlay="{{overlay}}"
  duration="{{duration}}"
  position="{{position}}"
  close-on-slide-down="{{false}}"
  bindbeforeenter="onBeforeEnter"
  bindenter="onEnter"
  bindafterenter="onAfterEnter"
  bindbeforeleave="onBeforeLeave"
  bindleave="onLeave"
  bindafterleave="onAfterLeave"
  bindclickoverlay="onClickOverlay"
  custom-style="{{customStyle}}"
  overlay-style="{{overlayStyle}}"
>
  <view class="detail-page">
    <button type="primary" bindtap="exit">推出</button>
  </view>
</page-container>

六、scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
const order = ['demo1', 'demo2', 'demo3']

Page({
  onShareAppMessage() {
    return {
      title: 'scroll-view',
      path: 'page/component/pages/scroll-view/scroll-view'
    }
  },

  data: {
    toView: 'green'
  },

  upper(e) {
    console.log(e)
  },

  lower(e) {
    console.log(e)
  },

  scroll(e) {
    console.log(e)
  },

  scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },

  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },

  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</view>
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

七、share-element

共享元素。

共享元素是一种动画形式，类似于 flutter Hero动画，表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。

使用时需在当前页放置 share-element 组件，同时在 page-container 容器中放置对应的 share-element 组件，对应关系通过属性值 key 映射。当设置 page-container 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<view>
	<view class="screen screen1">
		<block wx:for="{{contacts}}" wx:key="id" wx:for-item="contact">
			<view class="contact" bindtap="showNext" data-idx="{{index}}">
				<share-element class="avatar" key="avatar" duration="{{duration}}" transform="{{transformIdx === index}}">
					<image style="width: 40px;" mode="widthFix" src="../images/{{contact.img}}"></image>
				</share-element>
				<share-element duration="{{duration}}" class="name" key="name" transform="{{transformIdx === index}}">
					{{contact.name}}
				</share-element>
				<view class="list">
					<view>Phone: {{contact.phone}}</view>
					<view>Mobile: {{contact.mobile}}</view>
					<view>Email: {{contact.email}}</view>
				</view>
			</view>
		</block>
	</view>
</view>

<page-container
	show="{{show}}"
	overlay="{{overlay}}"
	close-on-slide-down
  duration="{{duration}}"
  position="{{position}}"
  bindbeforeenter="onBeforeEnter"
  bindenter="onEnter"
  bindafterenter="onAfterEnter"
  bindbeforeleave="onBeforeLeave"
  bindleave="onLeave"
  bindafterleave="onAfterLeave"
  bindclickoverlay="onClickOverlay"
>
	<view class="screen screen2">
		<view class="contact">
			<share-element class="avatar" duration="{{duration}}" key="avatar" transform>
				<image style="width: 40px;" mode="widthFix" src="../images/{{contact.img}}" />
			</share-element>
			<share-element class="name" key="name" duration="{{duration}}" transform>
				{{contact.name}}
			</share-element>
			<view class="paragraph {{show ? 'enter' : ''}}">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
				varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
				mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
				mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
				imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
				ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
				risus. Vestibulum eleifend dignissim.
				
			</view>
			<button class="screen2-button" bindtap="showPrev" hidden="{{!show}}" hover-class="none">Click Me</button>
		</view>
	</view>
</page-container>
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
import {contacts} from '../data/contact'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    contacts,
    contact: contacts[0],
    transformIdx: 0,
    position: 'center',
    duration: 300,
    show: false,
    overlay: false
  },

  showNext(e) {
    const idx = e.currentTarget.dataset.idx
    this.setData({
      show: true,
      contact: contacts[idx],
      transformIdx: idx
    })
  },

  showPrev() {
    this.setData({
      show: false
    })
  },

  onBeforeEnter(res) {
    console.log(res)
  },
  onEnter(res) {
    console.log(res)
  },
  onAfterEnter(res) {
    console.log(res)
  },
  onBeforeLeave(res) {
    console.log(res)
  },
  onLeave(res) {
    console.log(res)
  },
  onAfterLeave(res) {
    console.log(res)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
/* app css stylesheet */

page {
  color: #333;
  background-color: #ddd;
  overflow: hidden;
}

button {
  border: 0 solid #0010ae;
  background-color: #1f2afe;
  color: #fff;
  font-size: 120%;
  padding: 8px 16px;
  outline-width: 0;
  -webkit-appearance: none;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
}

.screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.contact {
  position: relative;
  padding: 16px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.avatar {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0;
}

.name {
  height: 65px;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

.list {
  padding-top: 8px;
  padding-left: 32px;
}

.screen1 {
  overflow-y: scroll;
  padding: 0;
}

.screen1 .contact {
  margin: 16px;
  height: auto;
  width: auto;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.screen2-button {
  display: block;
  margin: 24px auto;
}

.paragraph {
  -webkit-transition: transform ease-in-out 300ms;
  transition: transform ease-in-out 300ms;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.enter.paragraph {
  transform: none;
}

八、swiper和swiper-item

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
Page({
  onShareAppMessage() {
    return {
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  },

  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },

  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示点</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自动播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
    </view>
  </view>
</view>
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示点</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自动播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
    </view>
  </view>
</view>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-03-02，如有侵权请联系 cloudcommunity@tencent.com 删除
容器
javascript

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

容器
javascript
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
1923
Go 开发者必备：Protocol Buffers 入门指南
1061
10分钟带你彻底搞懂分布式链路跟踪
628
多租户的 4 种常用方案
1313
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
980
60页PPT全解：DeepSeek系列论文技术要点整理
1825
如何使用小程序视图容器组件
api容器微信小程序云上实践
在上一篇文章中，我们介绍了小程序入门开发的基础步骤，并通过几个Hello Word例子，让大家体验了下小程序的组件及API使用，接下来的教程中，我们将教大家详细使用每个组件及API的使用。
宮園薰
2018/11/05
9.7K0
如何使用小程序视图容器组件
微信小程序官方组件展示之视图容器movable-area源码
小程序·云开发小程序
以下将展示微信小程序之视图容器movable-area官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
软件事业部
2022/08/16
5600
小程序----video视频播放
小程序api
Video小程序播放视频的组件。 Video组件 wx.createVideoContext(videoId, this)创建并返回 video 上下文 videoContext 对象。在自定义组
honey缘木鱼
2018/06/13
3.5K0
手把手小程序开发【3-小程序组件】】
小程序微信htmlcanvasjavascript
小程序的前端界面，都是有相关的组件组成的。小程序组件的概念和HTML标签类似，虽然名称、属性和Html标签不太一样，但是实现效果和写法是类似的。
Lemon黄
2019/10/08
6090
03-微信小程序常用组件-视图容器组件
2023腾讯·技术创作特训营 第三期
微信小程序包含了六大组件：视图容器、基础内容、导航、表单、互动和导航。这些组件可以通过WXML和WXSS进行布局和样式设置，从而构建出丰富的小程序界面和交互体验。
度假的小鱼
2023/11/21
4480
03-微信小程序常用组件-视图容器组件
微信小程序添加轮播组件
官方文档
swiper 一、示例 wxml <swiper class="posta-swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true"> <swiper-item> <image src="/assets/img/t01df6660bd35903294.jpg"></image> </swiper-item> <swiper-item> <image src="/assets/img/t
江一铭
2022/06/16
7270
微信小程序添加轮播组件
【愚公系列】2022年09月 微信小程序-图片懒加载功能实现
npmjavascriptcss
大型电商，一个页面会存在非常多的图片，一次性加载图片会很慢，用户体验度不好，而图片懒加载是为了提这些网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。
愚公搬代码
2022/09/28
1.2K0
【愚公系列】2022年09月 微信小程序-图片懒加载功能实现
「小程序JAVA实战」小程序的视图组件（23）
小程序java
开始了解下小程序的组件。源码：https://github.com/limingios/wxProgram.git 中的No.10 视图组件 多个组件构成一张视图页面 经过样式和布局，页面其实理解成h
IT架构圈
2018/12/25
8630
【愚公系列】2022年08月 微信小程序-下拉刷新功能实现
jsonappviewweui
下拉刷新是移动端的专有名词，是指通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
愚公搬代码
2022/09/26
7460
【愚公系列】2022年08月 微信小程序-下拉刷新功能实现
前端-微信小程序开发(2)：小程序基本介绍
小程序
前面我们研究了下微信小程序的执行流程，因为拿不到源码，只能算我们的猜想，我们需要更加了解小程序还需要做具体的项目，于是我们将原来那套还算复杂的业务拿出来：
grain先森
2019/03/29
1.8K0
前端-微信小程序开发(2)：小程序基本介绍
微信小程序实现各种特效实例
微信小程序xml
写在前面 最近在负责一个微信小程序的前端以及前后端接口的对接的项目，整体上所有页面的布局我都已经搭建完成，里面有一些常用的特效，总结一下，希望对大家和我都能有所帮助 实例1：滚动tab选项卡 先看一下
okaychen
2018/01/05
4.1K3
微信小程序实现各种特效实例
微信小程序导航栏页面滑动切换
微信小程序
<view class="banner"> <scroll-view scroll-x="true" scroll-with-animation="true" scroll-into-view="
明知山
2020/09/17
5.5K1
微信小程序导航栏页面滑动切换
【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
json编程算法javascripthtml数据结构
富文本格式（Rich Text Format）即RTF格式，又称多文本格式，是由微软公司开发的跨平台文档格式。大多数的文字处理软件都能读取和保存RTF文档。它是一种方便于不同的设备、系统查看的文本和图形文档格式。
愚公搬代码
2022/12/01
2.1K0
【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
微信小程序入门之常用组件(04)
编程算法数据结构小程序微信node.js
重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等
海拥
2021/08/23
7430
微信小程序官方组件展示之基础内容rich-text源码
小程序微信小程序音视频小程序·云开发
以下将展示微信小程序之基础内容rich-text源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
软件事业部
2022/08/19
5390
【愚公系列】2022年08月 微信小程序-左划删除效果实现
jquery uinpmjavascript
左划删除效果实现主要用到两个标签：movable-area、movable-view。
愚公搬代码
2022/09/26
3600
全栈开发工程师微信小程序-上(中)
容器小程序微信javascript
750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.
达达前端
2019/07/03
9060
全栈开发工程师微信小程序-上(中)
【愚公系列】2022年04月 微信小程序-地图的使用之API相关函数案例
编程算法javascript图像处理
control 在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view
愚公搬代码
2022/04/21
8480
【愚公系列】2022年04月 微信小程序-地图的使用之API相关函数案例
两万字：讲述微信小程序之组件
编程算法数据结构cssjavascript
6.cover-image目前原生组件均已支持同层渲染，建议使用 image 替代
淼学派对
2022/11/20
4K0
两万字：讲述微信小程序之组件
【愚公系列】2022年03月 微信小程序-系统相机
编程算法flash
小程序调用相机可以用camera组件，也可以用wx.createCameraContext(this)接口。
愚公搬代码
2022/12/01
6170
【愚公系列】2022年03月 微信小程序-系统相机
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
微信小程序？微信小程序11？微信小程序功能咨询？
相关课程
微信公众号在线学习平台搭建实践_《硅谷课堂》微信小程序应用实践_《锋运票务系统》微信小程序学习路径课
如何使用小程序视图容器组件
9.7K0
微信小程序官方组件展示之视图容器movable-area源码
5600
小程序----video视频播放
3.5K0
手把手小程序开发【3-小程序组件】】
6090
03-微信小程序常用组件-视图容器组件
4480
微信小程序添加轮播组件
7270
【愚公系列】2022年09月 微信小程序-图片懒加载功能实现
1.2K0
「小程序JAVA实战」小程序的视图组件（23）
8630
【愚公系列】2022年08月 微信小程序-下拉刷新功能实现
7460
前端-微信小程序开发(2)：小程序基本介绍
1.8K0
微信小程序实现各种特效实例
4.1K3
微信小程序导航栏页面滑动切换
5.5K1
【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
2.1K0
微信小程序入门之常用组件(04)
7430
微信小程序官方组件展示之基础内容rich-text源码
5390
【愚公系列】2022年08月 微信小程序-左划删除效果实现
3600
全栈开发工程师微信小程序-上(中)
9060
【愚公系列】2022年04月 微信小程序-地图的使用之API相关函数案例
8480
两万字：讲述微信小程序之组件
4K0
【愚公系列】2022年03月 微信小程序-系统相机
6170
相关推荐
如何使用小程序视图容器组件
更多 >
愚公搬代码0
LV.8
这个人很懒，什么都没有留下～
文章
1.7K
获赞
3.4K
专栏
6
作者相关精选
换一批
加入讨论
的问答专区 >
萧雨0
相关课程
一站式学习中心 >
微信公众号在线学习平台搭建实践_《硅谷课堂》
384人在学
文件存储
云点播
CODING DevOps
微信小程序应用实践_《锋运票务系统》
318人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
微信小程序学习路径课
307人在学
云开发 CloudBase
小程序·云开发
微信小程序
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
3
目录
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验