当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序 流式布局 标签布局 自动布局 实现方案

微信小程序 流式布局 标签布局 自动布局 实现方案

2020年07月22日  | 移动技术网IT编程  | 我要评论

关键字：

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

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

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

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

代码实现：

.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

本文地址：https://blog.csdn.net/Small_years/article/details/107483651

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网