微信小程序自学（六）-- 组件-视图容器

最新推荐文章于 2025-02-02 16:08:49 发布
最新推荐文章于 2025-02-02 16:08:49 发布
阅读量917 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： wx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FourLeafCloverLLLS/article/details/86539012
本文详细解析了小程序中的视图容器组件，包括view、scroll-view、swiper、movable-view等，探讨了各组件的属性、事件及使用技巧，旨在帮助开发者掌握小程序布局与交互设计的核心要素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一 view

视图容器。

属性名类型默认值说明最低版本
hover-classStringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timeNumber50按住后多久出现点击态，单位毫秒 
hover-stay-timeNumber400手指松开后点击态保留时间，单位毫秒 
aria-roleString 无障碍访问，（角色）标识元素的作用2.5.0
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0

示例：

在开发者工具中预览效果

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

view

Bug & Tip

  1. tip: 如果需要使用滚动视图，请使用 scroll-view

这个view视图和普通的view用法相识， 在这就不多多阐述了， 

二 scroll-view

可滚动视图区域。

属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber / String50距顶部/左边多远时（单位px，2.4.0起支持rpx），触发 scrolltoupper 事件
lower-thresholdNumber / String50距底部/右边多远时（单位px，2.4.0起支持rpx），触发 scrolltolower 事件
scroll-topNumber / String 设置竖向滚动条位置（单位px，2.4.0起支持rpx）
scroll-leftNumber / String 设置横向滚动条位置（单位px，2.4.0起支持rpx）
scroll-into-viewString 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
enable-back-to-topBooleanfalseiOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupperEventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolowerEventHandle 滚动到底部/右边，会触发 scrolltolower 事件
bindscrollEventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
aria-labelString 无障碍访问，（属性）元素的额外描述 2.5.0

使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。

示例代码：

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view
    scroll-y
    style="height: 200px;"
    bindscrolltoupper="upper"
    bindscrolltolower="lower"
    bindscroll="scroll"
    scroll-into-view="{{toView}}"
    scroll-top="{{scrollTop}}"
  >
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view</button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red" class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

const order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper(e) {
    console.log(e)
  },
  lower(e) {
    console.log(e)
  },
  scroll(e) {
    console.log(e)
  },
  tap(e) {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

scroll-view

Bug & Tip

  1. tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
  2. tip: scroll-into-view 的优先级高于 scroll-top
  3. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
  4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

我们先实现竖向滑动效果 

首先我们定义一个scroll-view标签， 并且开启竖向滑动

<scroll-view class = "scroll" scroll-y = "true" > </scroll-view>

然后我们让一个红色框框和一个绿色框放在scroll-view标签里面

<scroll-view  class = "scroll"  scroll-y = "true"  >
    <view class = "image1"></view>
     <view class = "image2"></view>
</scroll-view>

接下来我们设置样式

.scroll{
    height: 150px
}

.image1{
    height: 100px;
    background: red
}

.image2{
    height: 100px;
    background: green
}

我们运行一下：

可以用鼠标左右滑动了

这里做几点说明：

1. 当设置竖向滑动时一定要设置scroll-view标签的高度， 并且在scroll-view里面标签的总高度要超过scroll-view标签的高度， 试着想一下， 如果里面的总高度比scroll-view标签的高度还低， 那怎么能达到滑动效果？ 

2. 要滑动的元素一定是在scroll-view标签里面， 一开始我傻了， 放在外面， 怎么也达不到效果。

3. 标签里面的各个标签一定要有区别， 不然很难发现是否滑动了， 比如里面的标签都是白色， 那怎么能看出效果

 

scroll-view标签我们讲到这， 至于其他功能， 去尝试一下， 我在这就不做演示了。

三 swiper

滑块视图容器。

属性名类型默认值说明最低版本
indicator-dotsBooleanfalse是否显示面板指示点 
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorColor#000000当前选中的指示点颜色1.1.0
autoplayBooleanfalse是否自动切换 
currentNumber0当前所在滑块的 index 
current-item-idString""当前所在滑块的 item-id ，不能与 current 被同时指定1.9.0
intervalNumber5000自动切换时间间隔 
durationNumber500滑动动画时长 
circularBooleanfalse是否采用衔接滑动 
verticalBooleanfalse滑动方向是否为纵向 
previous-marginString"0px"前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值1.9.0
next-marginString"0px"后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值1.9.0
display-multiple-itemsNumber1同时显示的滑块数量1.9.0
skip-hidden-item-layoutBooleanfalse是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息1.9.0
bindchangeEventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source} 
bindtransitionEventHandle swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinishEventHandle 动画结束时会触发 animationfinish 事件，event.detail 同上1.9.0

从 1.4.0 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

  • autoplay 自动播放导致swiper变化；
  • touch 用户划动引起swiper变化；
  • 其他原因将用空字符串表示。

注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。

swiper-item

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

属性名类型默认值说明最低版本
item-idString""该 swiper-item 的标识符1.9.0

示例代码：

在开发者工具中预览效果

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots">indicator-dots</button>
<button bindtap="changeAutoplay">autoplay</button>
<slider bindchange="intervalChange" show-value min="500" max="2000" />
interval
<slider bindchange="durationChange" show-value min="1000" max="10000" />
duration

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

Bug & Tip

  1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

这一节由我设置的一个轮播图， 代码如下：

index.wxml 

<swiper indicator-dots="true" indicator-active-color="red" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}" >
        <swiper-item>
            <image src="{{item}}"></image>
        </swiper-item>
     </block>
</swiper>
<switch bindchange="bindchange">自动播放</switch>
<slider max="10000"  class="slider1" color="#FFE1FF" selected-color="#FF1493" block-color="	#FFD700" show-value="true" bindchanging="bindchanging1">切换速度</slider>
<slider max="50000" class="slider2" color="#FFE1FF" selected-color="#FF1493"  block-color="	#FFD700" show-value="true" bindchanging="bindchanging2">图片滚动时间</slider>

index.js

Page({
    data: {
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        autoplay: false,
        interval:1000,
        duration: 500
    },
    // 按键触发时间
    bindchange:function(){
        // 按键状态更改时改变轮播图的状态
        this.setData({
            //设置是否开启自动播放
            autoplay:  !this.data.autoplay
        })
    },
    //切换速度滑块触发事件
    bindchanging1:function(e){
        this.setData({
            //设置切换速度时间
            interval: e.detail.value
        })
    },
    //图片滚动时间触发事件
    bindchanging2: function (e) {
        this.setData({
            //设置图片滚动时间
            duration: e.detail.value
        })
    }
})

效果： 

注意: 在本地调试的时候加载图片的时候报了403错误， 而在真机调试的时候图片加载正常， 我是用手机调试的。 

四 movable-view

基础库 1.2.0 开始支持，低版本需做兼容处理。

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

属性名类型默认值说明最低版本
directionStringnonemovable-view的移动方向，属性值有all、vertical、horizontal、none 
inertiaBooleanfalsemovable-view是否带有惯性 
out-of-boundsBooleanfalse超过可移动区域后，movable-view是否还可以移动 
xNumber / String 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 
yNumber / String 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 
dampingNumber20阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 
frictionNumber2摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 
disabledBooleanfalse是否禁用1.9.90
scaleBooleanfalse是否支持双指缩放，默认缩放手势生效区域是在movable-view内1.9.90
scale-minNumber0.5定义缩放倍数最小值1.9.90
scale-maxNumber10定义缩放倍数最大值1.9.90
scale-valueNumber1定义缩放倍数，取值范围为 0.5 - 101.9.90
animationBooleantrue是否使用动画2.1.0
bindchangeEventHandle 拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）1.9.90
bindscaleEventHandle 缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回1.9.90

除了基本事件外，movable-view提供了两个特殊事件

类型触发条件最低版本
htouchmove初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch1.9.90
vtouchmove初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch1.9.90

movable-view 必须设置width和height属性，不设置默认为10px

movable-view 默认为绝对定位，top和left属性为0px

注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

movable-area

基础库 1.2.0 开始支持，低版本需做兼容处理。

movable-view 的可移动区域

属性名类型默认值说明最低版本
scale-areaBooleanfalse当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area1.9.90

注意：movable-area 必须设置width和height属性，不设置默认为10px

当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；

当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

示例代码：

在开发者工具中预览效果

<view class="section">
  <view class="section__title">movable-view区域小于movable-area</view>
  <movable-area style="height: 200px; width: 200px; background: red;">
    <movable-view
      style="height: 50px; width: 50px; background: blue;"
      x="{{x}}"
      y="{{y}}"
      direction="all"
    ></movable-view>
  </movable-area>
  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view class="section__title">movable-view区域大于movable-area</view>
  <movable-area style="height: 100px; width: 100px; background: red;">
    <movable-view
      style="height: 200px; width: 200px; background: blue;"
      direction="all"
    ></movable-view>
  </movable-area>
  <view class="section__title">可放缩</view>
  <movable-area
    style="height: 200px; width: 200px; background: red;"
    scale-area
  >
    <movable-view
      style="height: 50px; width: 50px; background: blue;"
      direction="all"
      bindchange="onChange"
      bindscale="onScale"
      scale
      scale-min="0.5"
      scale-max="4"
      scale-value="2"
    ></movable-view>
  </movable-area>
</view>

Page({
  data: {
    x: 0,
    y: 0
  },
  tap(e) {
    this.setData({
      x: 30,
      y: 30
    })
  },
  onChange(e) {
    console.log(e.detail)
  },
  onScale(e) {
    console.log(e.detail)
  }
})

这一部分内容自己试验吧， 不做很多的讲解。 

五 cover-view

基础库 1.4.0 开始支持，低版本需做兼容处理。

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。

属性名类型默认值说明最低版本
scroll-topNumber / String 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效（单位px，2.4.0起支持rpx）2.1.0
aria-roleString 无障碍访问，（角色）标识元素的作用2.5.0
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0

六 cover-image

基础库 1.4.0 开始支持，低版本需做兼容处理。

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

属性名类型默认值说明最低版本
srcString 图标路径，支持临时路径、网络地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暂不支持base64格式。 
bindloadEventHandle 图片加载成功时触发2.1.0
binderrorEventHandle 图片加载失败时触发2.1.0
aria-roleString 无障碍访问，（角色）标识元素的作用2.5.0
aria-labelString 无障碍访问，（属性）元素的额外描述2.5.0

Bug & Tips

  1. tip: <cover-view>和<cover-image>的aria-role仅可设置为button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击
  2. tip: 基础库 2.2.4 起支持 touch 相关事件，也可使用 hover-class 设置点击态
  3. tip: 基础库 2.1.0 起支持设置 scale rotate 的 css 样式，包括 transition 动画
  4. tip: 基础库 1.9.90 起 cover-view 支持 overflow: scroll，但不支持动态更新 overflow
  5. tip: 基础库 1.9.90 起最外层 cover-view 支持 position: fixed
  6. tip: 基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。
  7. tip: 基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。
  8. tip: 基础库 1.6.0 起支持css opacity。
  9. tip: 事件模型遵循冒泡模型，但不会冒泡到原生组件。
  10. tip: 文本建议都套上cover-view标签，避免排版错误。
  11. tip: 只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
  12. tip: 建议子节点不要溢出父节点
  13. tip: 默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;
  14. bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示

示例：

在开发者工具中预览效果

<video
  id="myVideo"
  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
  controls="{{false}}"
  event-model="bubble"
>
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/path/to/icon_play" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/path/to/icon_pause" />
    </cover-view>
    <cover-view class="time">00:00</cover-view>
  </cover-view>
</video>

.controls {
  position: relative;
  top: 50%;
  height: 50px;
  margin-top: -25px;
  display: flex;
}
.play,
.pause,
.time {
  flex: 1;
  height: 100%;
}
.time {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  line-height: 50px;
}
.img {
  width: 40px;
  height: 40px;
  margin: 5px auto;
}

Page({
  onReady() {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  play() {
    this.videoCtx.play()
  },
  pause() {
    this.videoCtx.pause()
  }
})
微信小程序开发文档——视图容器组件的使用
Qjy_985211的博客
03-02 1082
视图容器组件 view scroll-view swiper 公用属性 1.scroll-view （可滚动的视图区域） 使用竖向滚动时，需要给&lt;scroll-view&gt;一个固定高度，通过 WXSS 设置 height。 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll...
微信小程序开发初学：滑块视图容器 - swiper(1)
2301_79058515的博客
04-08 1056
如果你也是看准了Python，想自学Python，在这里为大家准备了丰厚的免费。
微信小程序之可滚动视图容器组件 scroll-view
weixin_33757609的博客
11-22 621
1. 纵向滚动 scroll-y 当 设置为scroll-y 时, 需要将其高度设为固定值 如果整个页面，即最外层标签为scroll-view，需要并将其高度设为100%，也需要将page设为100%（可在app.wxss中设置）。 示例： html 文件： <!--pages/index/index.wxml--> <scroll-view scroll-y="true" ...
基于wepy开发的微信小程序loading加载动画组件
08-10
基于wepy开发的微信小程序loading加载动画组件
微信小程序loading组件显示载入动画用法示例【附源码下载】
12-29
本文实例讲述了微信小程序loading组件显示载入动画用法。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ① index.wxml 加载中... <button type=default bindtap=loadingTap>点击弹出loading</button> ② index.js Page({ data: { loadingHidden: true }, loadingTap: function(){ this.setData({
微信小程序--movable-view(可移动的视图容器)
Afanbaby的博客
12-23 3904
可移动的视图容器，在页面中可以拖拽滑动 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html 注意：movable-area 必须设置width和height属性，不设置默认为10px1.可以设置移动的方向： direction：属性值有all(所有方向)、vertical(纵向)、horizont
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
runsong911的博客
05-14 2924
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
黑马微信小程序开发自学笔记——Day1小程序入门
2302_78698589的博客
01-04 1678
微信小程序
微信小程序开发自学笔记 —— 六、底层框架
qq_36842789的博客
03-07 691
自定义组件是开发者可以自行扩充的组件。开发者可以将常用的节点树结构提取成自定义组件，实现代码复用。1.ShadowTree的概念2.运行原理3.组件间通信。
微信小程序开发的学习资料收集
热门推荐
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
ImageItem的布局方式
zzxiaoma的专栏
01-22 1045
Item.LAYOUT_CENTER :居中对齐Item.LAYOUT_DEFAULT:默认布局方式Item.LAYOUT_LEFT:左对齐Item.LAYOUT_NEWLINE_AFTER:排在这一行的下面Item.LAYOUT_NEWLINE_BEFORE:排在这一行的前面Item.LAYOUT_RIGHT:右对齐
UITabBar图片太大导致item的image模糊的解决办法
zhaoxiaoyao1987的专栏
02-09 1768
UITabBar的item的Image的大小是:30*30的，为了图片的质量UI提供的图片为60*60或者其他大于30*30的尺寸，如果直接使用会因为图片大导致模糊，自己调整尺寸也会造成模糊的情况。 解决办法： 使用原来尺寸的图片，图标名称@2x.png, 这样命名iOS将自动将图片将为 30x30 ，变为原来一半大小来适应视网膜屏幕的设备。 这样效果就会和设计图一样了。...
微信小程序首页图片本地缓存
一个无聊的程序员的琐碎
10-09 3598
来源 最近写小程序的时候，因为首页有轮播图、广告图等等，导致我的首屏加载太慢了，想着将一部分图片做下本地缓存。 解决办法 查询api FileSystemManager.saveFile FileSystemManager.saveFile(Object object) 保存临时文件到本地。此接口会移动临时文件，因此调用成功后，tempFilePath 将不可用。 wx.getSaved...
vue中img的src属性踩坑
harry_yaya的博客
03-19 3428
这里一个朋友问到我，在vue里面，写了一个for循环 <div v-for="item in 5"> <img src="../assets/img{{item}}" /> </div> 需要在下面img的路径根据循环的下标 或者是item本身去改变 达到img0—img1—img2类似效果 我的建议是使用模版字符串 <img ...
微信小程序综合案例实践2
qq_42183184的博客
09-01 8766
2.菜谱小程序首页 目录 1.搜索框&amp;搜索按钮 2.滑动图片框 3.小标题 4.菜品图片&amp;菜品名称列表 5.导航条 6.效果图 之前用AndroidStudio写过一个菜谱app，这次打算用微信小程序模拟一下app的首页。因为对微信小程序的不熟悉，完成过程中还是掉到了各种小坑。 首页的主要组成部分： 输入框----input 搜索按钮----image...
STLG_07_28_微信小程序开发 - 小程序的无障碍设计
最新发布
cdlislxjt的博客
02-02 723
微信小程序的无障碍设计旨在确保所有用户，包括残障人士，都能顺畅使用小程序。开发者可以通过添加ARIA属性（如aria-role和aria-label）来提升屏幕阅读器的兼容性。此外，微信开发者工具支持“无障碍访问模式插件”，方便开发者调试无障碍功能。小程序还应优化界面设计，提供语音识别、键盘操作支持，并确保与辅助技术兼容。通过这些措施，小程序能够更好地服务于视障、听力障碍等特殊用户群体。
微信小程序支付API-V3 PHP代码实现详解
资源摘要信息: "微信小程序支付API-V3 PHP完整代码（包括微信小程序端）" 提供了微信小程序中实现支付功能的完整代码示例，其中涵盖了服务器端（PHP）和客户端（微信小程序端）的开发过程。此资源允许开发者下载后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

零涂

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值