小程序view自动换行

最新推荐文章于 2024-09-28 13:37:26 发布

晨落果

最新推荐文章于 2024-09-28 13:37:26 发布

阅读量4k

点赞数 3

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_45172616/article/details/109534027

版权

本文介绍了如何在微信小程序中实现view组件的自动换行布局，通过示例代码展示了wxml和wxss的使用，并且扩展了view的选中状态功能，包括对应的wxml和js代码实现。

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

借鉴文章：
微信小程序view布局（换行等）
微信小程序开发详解（九）—微信小程序布局基础

效果图：
wxml代码：

<view class='fh_body'>
  <view style="padding: 10rpx;" wx:for='{{list}}' wx:key='{{index}}'>
    <view class="fh_item">{{item}}</view>
  </view>
</view>

wxss代码：

.fh_body{
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap; 
  /*flex-flow相当于 flex-direction和flex-wrap两个属性的组合*/
  /* flex-flow: row wrap; */
  align-content:space-around;
  }

.fh_item{
  border-radius: 50rpx;
  font-size: 35rpx;
  text-align: center;  
  background-color: #F5F5F5;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

————————————间隔线—————————————
以下代码增加了选中状态
效果图：
选中效果图

wxml代码：

<view class='fh_body'>
  <view style="padding: 10rpx;" wx:for='{{list}}' wx:key='{{index}}'>
    <view style="background-color: {{item.pitchOn == true?'red':'#F5F5F5'}};color:{{item.pitchOn == true?'white':'black'}};" data-index="{{index}}"  class="fh_item" bindtap="alter">{{item.name}}</view>
  </view>
</view>

js代码

  data: {
    list:[
	    {name:"jojo",pitchOn:false,},
	    {name:"我师兄实在太稳健了",pitchOn:true,},
	    {name:"诡秘之主",pitchOn:true},
	    {name:"全员恶玉",pitchOn:false},
	    {name:"鬼灭之刃",pitchOn:false},
	    {name:"我有一座冒险屋",pitchOn:true}
    ]
  },
  alter:function(e){
    var array = this.data.list;
    var index = e.currentTarget.dataset.index;
    for(let i = 0;i<array.length;i++){
      if(i == index){
        if(array[i].pitchOn == true){
          console.log("改false")
          array[i].pitchOn = false;
        }else{
          array[i].pitchOn = true;
        }
      }
    }
    this.setData({
      list:array
    })
  }