精华内容
下载资源
问答
  • 微信小程序侧滑布局

    2018-10-04 19:01:27
    微信小程序侧滑布局实现,可供学习使用,学习小程序的朋友可以下载哈。
  • 主要介绍了微信小程序 Flex布局详解的相关资料,需要的朋友可以参考下
  • 微信小程序flex布局demo
  • 这是四款微信小程序加载布局特效,需要的朋友可以免费下载使用。
  • 主要介绍了微信小程序 UI布局常用技巧整理总结的相关资料,现在不论是APP 还是各种软件,UI布局还是非常重要的,用户体验第一位啊,这里就整理下微信小程序的UI布局,需要的朋友可以参考下
  • 主要介绍了浅谈微信小程序flex布局基础,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序图片瀑布流布局demo
  • 微信小程序入门布局

    2018-04-08 17:36:59
    【微信小程序入门布局】微信小程序结构*.js:javascript*.json:json数据*.wxml:页面,类似html*.wxss:样式,类似css结构没啥好说的,官网介绍很清楚,微信小程序布局也是标签+CSS样式,熟悉html的入手非常快一、基础...

    【微信小程序入门布局】

    微信小程序结构

    *.js:javascript

    *.json:json数据

    *.wxml:页面,类似html

    *.wxss:样式,类似css

    结构没啥好说的,官网介绍很清楚,微信小程序布局也是标签+CSS样式,熟悉html的入手非常快

    一、基础布局标签

    view:布局主要标签,类似html的div

    <view class="container"></view>

    scroll-view:带滚动条视图

    <scroll-view scroll-y="true" class="center" bindscrolltolower='onReachBottom'></scroll-view>

    二、布局样式

    样式top的view中含有样式top_l、top_c、top_r的view

    <view class="top">
        <view class='top_l' >
          
        </view>
        <view class='top_c'>
          
        </view>
        <view class='top_r'>
          
        </view>
    </view>

    1、横向布局

    样式top_l、top_c、top_r的view左中右排版

    .top{
      height: 120rpx;
      width:500rpx;
      display: flex;  
      flex-direction: row; 
    }
    
    .top_l{
      height: 120rpx;
      width:100rpx;
    }
    
    .top_c{
      height: 120rpx;
      flex: 1;
    }
    .top_r{
      height: 120rpx;
      width:100rpx;; 
    }

    display: flex; 将样式top的view设置成弹性布局

    flex-direction: row; 将样式top的view设置成横向布局

    当.top_l和.top_r固定宽度的前提,.top_c设置flex:1,样式top_c的view宽度自适应,也就是默认剩余宽度

    当三个view不设置宽度,均设置flex:1,平均分配.top宽度

    2、纵向布局

    样式top_l、top_c、top_r的view上中下排版

    .top{
      height: 500rpx;
      width:100rpx;
      display: flex;  
      flex-direction: column; 
    }
    
    .top_l{
      height: 100rpx;
      width:100rpx;
    }
    
    .top_c{
      width:100rpx;
      flex: 1;
    }
    .top_r{
      height: 100rpx;
      width:100rpx;
    }

    display: flex; 将样式top的view设置成弹性布局

    flex-direction: column; 将样式top的view设置成纵向布局

    当.top_l和.top_r固定高度的前提,.top_c设置flex:1,样式top_c的view高度自适应,也就是默认剩余高度

    当三个view不设置高度,均设置flex:1,平均分配.top高度

    三、深入学习样例


    图文混排、JS伪交互样例下载

    展开全文
  • 主要介绍了微信小程序Flex布局用法,深入浅出地罗列分析了flex弹性布局常见的属性、功能及使用方法,需要的朋友可以参考下
  • 微信小程序页面布局

    万次阅读 多人点赞 2018-03-27 11:48:43
    一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 2.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态...
    一,微信小程序页面布局方式采用的是Flex布局
    
    1.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。
    2.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的。

    3.Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。

    二,Flex布局的特点:
    1.任意方向的伸缩,向左,向右,向下,向上
    2.在样式层可以调换和重排顺序
    3.主轴和侧轴方便配置
    4.子元素的空间拉伸和填充
    5.沿着容器对齐

    三,微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的使用。

    伸缩容器
    设有display:flex或者display:block的元素就是一个flex container(伸缩容器),里面的子元素称为flex item(伸缩项目),flex container中子元素都是使用Flex布局排版。

    display:block 指定为块内容器模式,总是使用新行开始显示,微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。

    display:flex:指定为行内容器模式,在一行内显示子元素,可以使用flex-wrap属性指定其是否换行,flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)
    使用display:block(默认值)的代码:
    <view class="flex-row" style="display: block;">
      <view class="flex-view-item">1</view>
      <view class="flex-view-item">2</view>
      <view class="flex-view-item">3</view>
    </view>
    显示效果:

    block改换成display:flex的显示效果:

    可以从效果图看到block和flex的区别,子元素view是在换行显示(block)还是行内显示(flex)。

    主轴和侧轴:
    Flex布局的伸缩容器可以使用任何方向进行布局。
    容器默认有两个轴:主轴(main axis)和侧轴(cross axis)。

    主轴的开始位置为主轴起点(main start),主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。

    同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。
    详情见下图:

    Flex-direction

    注意,主轴并不是一定是从左到右的,同理侧轴也不一定是从上到下,主轴的方向使用flex-direction属性控制,它有4个可选值:
    1.row :从左到右的水平方向为主轴
    2.row-reverse:从右到左的水平方向为主轴
    3.column:从上到下的垂直方向为主轴
    4.column-reverse从下到上的垂直方向为主轴

    如果水平方向为主轴,那个垂直方向就是侧轴,反之亦然。

    四种主轴方向设置的效果图:

    图中的实例展示了使用了不同的flex-direction值排列方向的区别。

    实例代码:
    <view >
     <view class="flex-row" style="display: flex;flex-direction: row;">
    <view class="flex-view-item">1</view>
    <view class="flex-view-item">2</view>
    <view class="flex-view-item">3</view>
     </view>
     <view class="flex-column" style="display:flex;flex-direction: column;" >
    <view class="flex-view-item">c1</view>
    <view class="flex-view-item">c2</view>
    <view class="flex-view-item">c3</view>
     </view>
    </view>
    运行效果:

    flex-direction

    对齐方式

    子元素有两种对齐方式:

    justify-conent 定义子元素在主轴上面的对齐方式
    align-items 定义子元素在侧轴上对齐的方式

    justify-content有5个可选的对齐方式:
    1.flex-start 主轴起点对齐(默认值)
    2.flex-end 主轴结束点对齐
    3.center 在主轴中居中对齐
    4.space-between 两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
    5.space-around 每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同。
    6.justify-content的对齐方式和主轴的方向有关,下图以flex-direction为row,主轴方式是从左到右,描述jstify-content5个值的显示效果:

    justify-content

    align-items表示侧轴上的对齐方式:
    1.stretch 填充整个容器(默认值)
    2.flex-start 侧轴的起点对齐
    3.flex-end 侧轴的终点对齐
    4.center 在侧轴中居中对齐
    5.baseline 以子元素的第一行文字对齐

    align-tiems设置的对齐方式,和侧轴的方向有关,下图以flex-direction为row,侧轴方向是从上到下,描述align-items的5个值显示效果:

    aign-items

    有了主轴和侧轴的方向再加上设置他们的对齐方式,就可以实现大部分的页面布局了。

    源代码地址:https://github.com/jjz/weixin-mina/blob/master/pages/flex/flex.wxml

    感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

    原文链接:http://www.cnblogs.com/dragondean/p/5922740.html

    展开全文
  • 微信小程序文字排版布局微信小程序文字换行布局微信小程序文字自动布局微信小程序流式布局微信小程序文字版瀑布流布局 类似这种效果: 额,具体这叫啥布局,问了几个人,不同人有不同的回答,我自己也叫...

    关键字:

    微信小程序文字排版布局,微信小程序文字换行布局,微信小程序文字自动布局,微信小程序流式布局,微信小程序文字版瀑布流布局

    类似这种效果:
    在这里插入图片描述

    额,具体这叫啥布局,问了几个人,不同人有不同的回答,我自己也叫不出啥名了,写这么多标签,是为了能想起这种布局界面,但是不知道该怎么搜关键词 的童鞋们多一些标签,也增加一些能搜到的可能性。
    具体效果如下所示,文字放不开的话,就另起一行,放的开就继续往后排。

    效果如下:
    在这里插入图片描述

    代码实现:

    .wxml

    <view class='itemsMainView'>
      <view class="hotItem" wx:for='{{itemList}}' bindtap='itemClicked' data-item="{{item}}">
        <view style="margin-left:24rpx;margin-right:24rpx;">{{item}}</view>
      </view>
    </view>
    
    <view style="width:100%;height:140rpx;border-radius:8rpx;background-color:white;display:flex;justify-content:center;align-items:center;position:fixed;bottom:0;">
      <view style="border-radius:15rpx;background-color:green;width:75%;height:80rpx;display:flex;justify-content:center;align-items:center;color:white;" bindtap="addNewTagBtnClicked">加一个</view>
    </view>
    

    .wxss

    page {
      width: 100%;
      height: 100%;
    }
    
    .hotMainView {
      background-color: rgba(0, 0, 0, 0);
      margin-top: 60rpx;
      overflow: hidden;
      padding-bottom: 10px;
    }
    
    .itemsMainView {
      background-color: white;
      overflow: hidden;
      padding-bottom: 10px;
      margin-left: 15rpx;
      margin-bottom: 120rpx;
    }
    
    .hotItem {
      text-align: center;
      line-height: 70rpx;
      display: inline-table;
      font-size: 32rpx;
      background-color: rgb(246, 246, 246);
      margin: 16rpx 16rpx;
      border-radius: 35rpx;
    }
    

    .js

    /**
       * 页面的初始数据
       */
      data: {
        itemList: ['标签1', '标签2', '标签33', '标签444', '标签5555', '标签66666', '标签7', '标签88', '标签999999', '我是特别长文字,特别长特别长特别长特别长的那种']
      },
    
      itemClicked: function (e) {
        var item = e.currentTarget.dataset.item
        wx.showToast({
          title: item,
        })
    
      },
    
      addNewTagBtnClicked: function (e) {
        var newItem = this.data.itemList[Math.round(Math.random() * 10)]
    
        var newList = this.data.itemList
        newList.push(newItem)
    
        this.setData({
          itemList: newList
        })
    
      },
    

    end

    展开全文
  • 邮箱登录微信小程序模板 布局、样式、JS分离 包含以下内容 请输入邮箱 靖输入密码 忘记密码 提交 微信小程序模板 布局、样式、JS分离
  • 微信小程序 flex布局属性总结

    千次阅读 2017-01-20 16:21:20
    微信小程序 flex布局


    <!--pages/flex/flex.wxml-->
    <view class="contant" style="height:{{height}}px">
       <view class="basicview1"></view>
       <view class="basicview2"></view>
       <text class="basicview">1</text>
       <text class="basicview">2</text>
       <text class="basicview basicview3">3</text>
       <text class="basicview">4</text>
       <text class="basicview">5</text>
       <text class="basicview">6</text>
       <!--<text class="basicview basicview7">7</text>
       <text class="basicview">8</text>-->
    </view>





    微信小程序 ---- flex布局篇


                  flex-shrink : 0 ; 1 ----自动缩放    

                  flex-grow :0 ; 1 ----  针对设备item放大     

                  上面两个其实是相反的

                  以上两者可简写 flex : 0 0 50%;  或者  flex : 1 1 auto;    (flex-shrink : 1 ; flex-grow : 1)

     

                  flex-direction : row(行)  column(列)    

                  flex-wrap :wrap  (自动换行)        

                 以上两者可简写    flex-flow : row  wrap;     (针对容器)          

               

                flex-basis : 50%    相对于设备宽度比例的放大或缩小  


                justify-content :  center    (主轴)  


               align-items : (竖轴)  ----影响用于一行排列

               align-content  (间距)  --- 影响用于多行排列 

               align-self : flex-end   (脱流)

     

                

            



        

    展开全文
  • 微信小程序的Flex布局demo-4种必备常用的Flex布局模式 微信小程序开发论坛 垂直微信小程序开发交流社区:http://weappdev.com 官方建议的Flex布局 > Flex的布局相比传统的float布局来说,简单、快捷、方便。掌握flex...
  • 微信小程序view布局

    2018-11-15 17:09:57
    微信小程序view布局 微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明:display:flex wxml页面: &amp;amp;lt;view class=&amp;quot;A&...
  • 微信小程序布局

    2018-05-26 21:07:35
    微信小程序布局有代码有图 微信小程序布局有代码有图 微信小程序布局有代码有图
  • 微信小程序常用布局

    千次阅读 2020-02-24 21:54:01
    微信小程序常用布局display-flex display: flex / block flex Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 block 笔记来源: ......
  • 预收参看: https://blog.csdn.net/abs625/article/details/89562048
  • 微信小程序flex布局

    2018-09-20 19:30:55
    微信小程序中flex布局中我常用的也就 flex-direction justify-content align-items 其中, flex-direction 表示的是整个页面是水平布局还是垂直布局,而 justify-content 表示的是主轴方向上的对齐, ...
  • 微信小程序布局语法
  • 微信小程序ui布局常用技巧

    万次阅读 2016-11-12 14:30:09
     微信小程序是一种全新的应用形态,微信小程序平台不需要下载安装即可使用应用的平台,微信小程序实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。 【更多原创微信小程序技术文章分享平台:扫...
  • 微信小程序 - 布局基础

    千次阅读 2018-08-19 10:37:31
    记录自极客学院微信小程序教学视频 目录 flex 容器属性详解 flex-direction 决定元素的排列方向 flex-wrap 决定元素如何换行(排列不下时) flex-flow :flex-direction 和 flex-wrap 的简写 justify-content ...
  • 布局基础   默认每个View进行垂直布局。每个view占据一行。 flex布局(设置display=flex)    平面布局有一个主轴和交叉轴(类似于平面坐标中的X轴和 Y轴)  默认X轴为主轴 Y轴为交叉轴    flex容器属性:针对...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,041
精华内容 14,816
关键字:

微信小程序图片布局

微信小程序 订阅