微信小程序视图示例之view/scroll-view示例中缺少css

在参考微信小程序的视图示例时，发现给的示例view和scroll-view缺少对应的css，整理一下给有需要的同学参考下：

View

对应官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html

直接使用view示例代码，发现不能达到预期效果，如图中左边所示：

是因为示例中只有wxml代码，相应的wxss代码没有给出，

.flex-wrp {white-space: nowrap; display:flex;
}.section__title {background: #fbf9fe;width: 100%; height: 50px;
}.flex-item {width: 150px; height: 150px;
}
.bc_green {background: green;
}.bc_red {background: red;
}.bc_blue {background: blue;
}

添加对应的wxss后，则效果如下：

Scroll-View

对应官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

直接使用示例代码缺少css文件，效果如下：

添加对应的wxss文件：

.btn-area button {width: 100%;
}.section__title {background: #fbf9fe;width: 100%; height: 50px;
}.scroll-view-item {width: 100%; height: 100px;
}.scroll-view_H {white-space: nowrap;display:flex;
}.scroll-view-item_H {width: 150px; height: 150px; display:inline-block;
}.bc_green {background: green;
}.bc_red {background: red;
}
.bc_yellow {background: yellow;
}
.bc_blue {background: blue;
}

效果图如下：

微信小程序视图示例之view/scroll-view示例中缺少css相关推荐

微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序拍照和摄像功能实现方法示例
微信小程序拍照和摄像功能实现方法示例:本文实例讲述了微信小程序拍照和摄像功能实现方法.分享给大家供大家参考,具体如下: 微信小程序拍照功能实现逻辑和实例代码: 原先的想法是使用微信的camera组件来 ...
微信小程序渲染层错误：可以在AppData中获取到值但无法渲染到页面
微信小程序渲染层错误:可以在AppData中获取到值但无法渲染到页面 1.遇到的问题: 2.解释: 3.附上正确的完整代码: 在我跟着视频(bili:BV1nE41117BQ)P78 学做小程序的过程 ...
微信小程序开屏动画组件封装以及使用示例
思路首先调用wx.hideTabbar() 隐藏微信小程序的tabbar 封装一个开屏动画组件,在几秒后自动关闭在关闭的时候调用 wx.showTabber();来使tabbar显示出来效果展示 ...
微信小程序视图控件与bindtap之间的问题的解决
在微信小程序中最常用的<view>控件可以用bindtap(冒泡反应) 如<view bindtap="ItemOnclick" data-mType=&qu ...
微信小程序旋转动画，图片转动view旋转等
微信小程序中的旋转动画.已下图为例图片右上角的音乐图标需要旋转,上代码 wxml <image class='yy' src='../image/yytb.png' animation='{{ ...
【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
微信小程序之录音与播放功能（完整示例demo）
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 源码简介: 点击按钮实现相应效果 ↓↓↓↓↓↓↓↓ //test.wxml <button bi ...
wifi 小程序透传_微信小程序实现的一键连接wifi功能示例
本文实例讲述了微信小程序实现的一键连接wifi功能.分享给大家供大家参考,具体如下: 在已知wifi账号和wifi密码的情况下,一般采用以下的流程来连接wifi Wi-Fi 接口调用: 1.Andro ...

微信小程序视图示例之view/scroll-view示例中缺少css

View

Scroll-View

微信小程序视图示例之view/scroll-view示例中缺少css相关推荐

最新文章

热门文章