示例

<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>

示例讲解

学过HTML的童靴很容易看懂上面的代码。没用过这种标签语言的，其实也很容易看懂。稍微讲解一下：

1.单个的view

<view class="section">
</view>

这就是一个单个的视图。“section”则是写在.wxss文件中的样式，容器的样式决定它的形状、颜色、位置等属性。例：

.section{position: absolute;top: 28rpx;right: 44rpx;width: 32rpx;height: 32rpx;
}

2.父容器和子容器的嵌套

<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 class="widgets__item" bindtap="tapToNext">
</view>

关键点是 bindtap="tapToNext"，这就绑定了一个点击事件，响应事件的函数名是tapToNext。这个函数在.js文件中。形如

tapToNext:function(event){console.log(event)wx.navigateTo({url: '../logs/logs'})}

点击后界面跳到一个名为logs的Page。

关于事件的详细讲解见 wei小程序-事件

微信小程序-view(视图容器)相关推荐

微信小程序View视图容器组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架为开发者提供了一系列完备的UI组件,方便开发者快速构建小程序UI界面.借助这些UI组件开发者可以像搭积木一样快速地拼装出一栋房 ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
小程序开发.微信小程序.组件.视图容器
小程序开发.微信小程序中的组件.视图容器组件 note:当前本文编辑中- 20220731 jcLee95 的个人博客邮箱 :291148484@163.com CSDN 主页:https://bl ...
微信小程序之视图容器（swiper）组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
微信小程序的视图容器—swiper
2019独角兽企业重金招聘Python工程师标准>>> swiper滑动面板(又称滑块视图容器,常见的轮播图) 属性名类型默认值说明 indicator-dots Boole ...
微信小程序滑块视图容器
效果图如下: 完成以上效果需: wxml部分: <view class="nav"><block wx:for="{{styles}}" wx ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
image 微信小程序flex_微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml flex-direction: row 1 2 3 flex-direction: column ...
微信小程序 view样式
参考链接: (1)微信小程序View的布局 https://www.jianshu.com/p/862dfa698523 微信小程序样式众多,这里介绍最为常用的view 小程序 View 支持两种布局 ...

微信小程序-view(视图容器)

示例

示例讲解

给视图容器绑定点击事件

微信小程序-view(视图容器)相关推荐

最新文章

热门文章