精华内容
下载资源
问答
  • 小程序左右布局
    千次阅读
    2021-03-05 12:05:52
    <view class="container">
    	<scroll-view scroll-y class="left">
    		<view class="item" {{activeIndex===index? 'active' : ''}}" 
    		wx:for="{{10}}" wx:key="index" bindtap="clickType" 
    		data-index="{{index}}" data-id="{{item.Id}}">{{item.Name}}</view>
    	</view>
    	<scroll-view scroll-y class="right">
    		<view class="data" wx:for="{{dataList}}" wx:key="index">
    			<view class="title">{{item.Title}}</view>
    			<view>
    				<view class="flex j-s a-c">{{item.Section.Name}}</view>
    				<view>{{item.Createtime}}</view>
    			</view>
    		</view>
    	</view>
    </view>
    

    样式:

    .container{
      display: flex;
      justify-content: space-between;
      height: 100vh;
    }
    .left{
      width: 200rpx;
      background: #eeeeee;
    }
    .left .item{
      text-align: center;
      padding:10px 0;
      border-left: transparent 8rpx solid;
    }
    .left .item.active{
      background: #ffffff;
      color: #248067;
      border-left-color: #248067;
    }
    .right{
      flex: 1;
      font-size: 14px;
    }
    .right .data{
      padding:14rpx 8rpx;
    }
    .right .title{
      font-weight: bold;
    }
    
    clickType(e){
    	let {index,id} = wx.$key(e)
    	this.setData({
    		activeIndex:id
    	})
    	//调用获取数据的方法,将分类的id传给它
    	this.getDataList(id)
    }
    data:(
    	//高亮索引
    	activeIndex:0,
    	//分类列表
    	typeList:[],
    	//数据列表
    	dataList:[]
    ),
    //获取数据信息的方法
    getDataList(id){
    	//显示Loading
    	wx.showLoading({
    		title:'加载中'
    	})
    	//wx对象发生ajax请求的方法
    	wx.request({
    		method:'GET',
    		url:'https://bingjs.com:8001/Subject/GetSubjects',
    		data:{
    			section_id
    		},
    		//成功后的回调
    		success:(data)=>{
    			//将获取到的数据赋值给对应的数组,并更新到页面
    			this.setData({
    				dataList:data
    			})
    		},
    		//完成后的回调
    		complete:()=>{
    			//关闭Loading
    			wx.hideLoading()
    		}
    	})
    },
    //获取分类信息的方法
    getTypeList(){
    	//显示Loading
    	wx.showLoading({
    		title:'加载中'
    	})
    	//wx对象发生ajax请求的方法
    	wx.request({
    		method:'GET',
    		url:'https://bingjs.com:8001/Section/GetSections',
    		//成功后的回调
    		success:(data)=>{
    			//将获取到的数据赋值给对应的数组,并更新到页面
    			this.setData({
    				typeList:data
    			})
    		},
    		//完成后的回调
    		complete:()=>{
    			//关闭Loading
    			wx.hideLoading()
    		}
    	})
    },
    onLoad:function(option){
    	this.getTypeList()  //调用获取分类信息的方法
    	let section_id = this.typeList[this.activeIndex].Id
    	this.getDataList(section_id)  //调用获取数据的方法
    }
    
    更多相关内容
  • 本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,仅供学习分享使用。 概述 在微信小程序开发中,左右分栏(左边显示分类,右边显示...
  • 微信小程序页面布局方式采用的是Flex布局。 Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。...微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的
  • <view class="weui-flex"> <view class="weui-flex__item"> <view class="card"> <image class="item-icon" src="/static/img/wb.png" mode="widthFix"></image>.../...

     

    <view class="weui-flex">
      <view class="weui-flex__item">
        <view class="card">
          <image class="item-icon" src="/static/img/wb.png" mode="widthFix"></image>
          <view class="title">微博</view>
        </view>
      </view>
      <view class="weui-flex__item">
        <view class="card">weui</view>
      </view>
      <view class="weui-flex__item">
        <view class="card">weui</view>
      </view>
      <view class="weui-flex__item">
        <view class="card">weui</view>
      </view>
      <view class="weui-flex__item">
        <view class="card">weui</view>
      </view>
    </view>
    .weui-flex {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -5px;
      margin-left: -5px
    }
    
    .weui-flex__item {
      flex: 0 0 auto;
      width: 50%;
      padding: 0 20rpx;
      box-sizing: border-box;
    }
    
    .card {
      background-color: rgb(255, 67, 81);
      border-radius: 5px;
      padding: 15px;
      color: #fff;
      font-size: 14px;
      height: 111px;
      margin-bottom: 20rpx;
    }
    
    .card  .item-icon{
      position: relative;
      z-index: 1;
      width: 80rpx;
      height: 80rpx;
    }

    展开全文
  • 瀑布流 – 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接。如下图: 瀑布流的两种做法: css: 在父元素上使用column-count: 2也可以做到两列排版。但column-count:...
  • 微信小程序的Flex布局demo-4种必备常用的Flex布局模式 微信小程序开发论坛 垂直微信小程序开发交流社区:http://weappdev.com 官方建议的Flex布局 > Flex的布局相比传统的float布局来说,简单、快捷、方便。掌握flex...
  • 微信小程序页面布局方式采用的是Flex布局。 Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。...微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的使用
  • 在微信小程序的循环列表中,如何实现图片的等比例缩放,这件事上我有尝试,但是效果不佳,欢迎交流解决方案!! 实现方式 虽然实现方式很简单,但是我起初没有想到,也是绕了很远的路才想到。当你看到下面的解决方案...
  • 前段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。  flex布局有啥用呢,...
  • 微信小程序左右布局

    千次阅读 2020-10-04 15:21:04
    本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,仅供学习分享使用。 概述 在微信小程序开发中,左右分栏(左边显示分类,右边显示...

    本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,仅供学习分享使用。

    概述

    在微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城。

    布局分析

    布局分析图示如下:

    涉及知识点

    • scroll-view 可滚动视图区域。使用竖向滚动时,需要给<scroll-view>一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
    • scroll-y  是否允许纵向滚动,默认false。
    • scroll-into-view  值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素(动态更新该属性的值,实现左右联动)。
    • view 基础控件。
    • hover-class   设置指定按下去的样式类。当 hover-class="none" 时,没有点击态效果。
    • wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
    • bindtap='showItem' 绑定组件的单击事件,不加括弧

    示例效果图

    示例效果图如下所示:

    核心代码

    WXML代码如下:

     1 <!--pages/show/show.wxml-->
     2 <view class="show-info">
     3   <scroll-view class='left' scroll-y>
     4     <view class="jy-item" wx:for="{{jytype}}" wx:key="id" hover-class="jy-item-hover" wx:for-item="item" bindtap='showItem' data-id="{{item.id}}">
     5       <image src="{{item.url}}"></image>
     6       <label>{{item.name}}</label>
     7     </view>
     8   </scroll-view>
     9   <scroll-view class='right' scroll-y scroll-into-view="{{viewId}}">
    10     <view class="jy-detail" wx:for="{{jydetail}}" wx:key="id" id= "D-{{detail.typeid}}-{{detail.id}}" wx:for-item="detail" bindtap='showDetail' data-id="{{detail.id}}">
    11       <image src="{{detail.url}}"></image>
    12       <label>{{detail.name}}</label>
    13     </view>
    14   </scroll-view>
    15 </view>

    JS代码如下:

    1   showItem: function(event) {
    2     var that=this;
    3     var viewId = "D-" + event.currentTarget.dataset.id + "-" + event.currentTarget.dataset.id+"00";
    4     that.setData({
    5       viewId: viewId
    6     });
    7     console.log(viewId);
    8   },

    WXSS布局如下,此处主要用到了盒子布局(display: flex;flex-direction: row;):

     1 .show-info {
     2   height: 100%;
     3   display: flex;
     4   flex-direction: row;
     5   align-items: flex-start;
     6   padding: 10rpx 0;
     7   box-sizing: border-box;
     8 }
     9 
    10 .left {
    11   width: 30%;
    12   height: 100%;
    13   display: flex;
    14   flex-direction: column;
    15   margin:2px;
    16 }
    17 
    18 .jy-item-hover{
    19   border: none;
    20 }
    21 
    22 .right {
    23   width: 70%;
    24   height: 1200rpx;
    25   display: flex;
    26   flex-direction: column;
    27   margin: 2px;
    28 }

    备注

    学而时习之,不亦说乎。

    展开全文
  • 主要介绍了微信小程序 简单DEMO布局,逻辑,样式的练习的相关资料,这里写一个简单实例练习小程序布局,并附实例代码和实现效果图,需要的朋友可以参考下
  • 1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右,view相当于一个块元素...
  • 微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系作者。微信小程序源码,前端源码,简单展示源码,原生小程序源码 非uniapp,仅供参考,如有涉及版权问题请联系...
  • 段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。  flex布局有啥用呢,...
  • 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: <image class=taobao-list-photo src={{item.imageUrl}}/>
  • 微信小程序页面布局

    千次阅读 2021-07-06 11:59:22
    微信小程序页面布局方式采用的是Flex布局。Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。 Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不...

    Flex布局

    微信小程序页面布局方式采用的是Flex布局。
    Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。
    Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的。
    Flex布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。


    Flex布局的特点:

    • 任意方向的伸缩,向左,向右,向下,向上
    • 在样式层可以调换和重排顺序
    • 主轴和侧轴方便配置
    • 子元素的空间拉伸和填充
    • 沿着容器对齐

    微信小程序实现了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的显示效果:

    flex

    可以从效果图看到blockflex的区别,子元素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个可选值:

    • row :从左到右的水平方向为主轴
    • row-reverse:从右到左的水平方向为主轴
    • column:从上到下的垂直方向为主轴
    • 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个可选的对齐方式:

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

      justify-content

    align-items表示侧轴上的对齐方式:

    • stretch 填充整个容器(默认值)
    • flex-start 侧轴的起点对齐
    • flex-end 侧轴的终点对齐
    • center 在侧轴中居中对齐
    • baseline 以子元素的第一行文字对齐

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

    aign-items

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

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

    示例下载

    展开全文
  • 微信小程序flex布局讲解

    千次阅读 2022-01-14 09:37:09
    flex 布局是继 标准流布局 、 浮动布局 、 定位布局 后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或 均匀分布,甚至可以随着窗口缩放自动适应。 flex 布局在浏览器中存在一定的兼容性(具体参 考...
  • 微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写,欢迎大家参考和提意见微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写,欢迎大家参考和提意见
  • 简单的左滑操作和瀑布流布局只是简单的实现了左滑功能,和瀑布流的布局
  • 微信小程序页面布局方式采用的是Flex布局。 Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局。...微信小程序实现了Flex布局,简单介绍下Flex布局在微信小程序中的使
  • 网上大都是js实现的,比较麻烦的,简单方法为: 实现页面瀑布流思路:使用CSS3属性 column-count: number|auto;将容器元素分为两列, column-gap: length|normal;设置列之间的间隔, break-inside: avoid 使元素...
  • 微信小程序布局 左右结构简单例子

    千次阅读 2018-08-02 17:13:23
    左右结构 左边是商品分类 右边是分类 或者是 商品列表 很常见 效果图   wxml &lt;!--index.wxml--&gt; &lt;view class="container"&gt; &lt;view class="nav_left&...
  • 可自由DIY布局,自带一键生成小程序功能,内附安装说明 无需编程,各行业模版直接套用,一键生成,轻松搭建小程序 –无需技术基础,轻松玩转小程序 无需代码编程,无需技术基础,简单的操作页面,清晰的模块 分划,...
  • 无需代码编程,无需技术基础,简单的操作页面,清晰的模块分划,详尽的功能组件,让您短时间即可轻松玩转小程序。 垂直研发,深度挖掘行业解决方案 深入行业了解不同行业的痛点和需求,致力于解决实际问题,给客户...
  • 微信小程序左右布局

    万次阅读 2017-01-11 14:12:17
    微信小程序的在同一行有一个控件放在左边,另一个控件放在右边,可能利用来wxss作实现; demo.wxml代码如下:  左边的文本  右边的文本 demo.wxss代码如下: .container {  display: flex;  flex-direction: row;...
  • 主要介绍了浅谈微信小程序flex布局基础,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 246,824
精华内容 98,729
关键字:

小程序左右布局