欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-25 12:09:51
关键字:微信小程序文字排版布局,微信小程序文字换行布局,微信小程序文字自动布局,微信小程序流式布局,微信小程序文字版瀑布流布局类似这种效果:额,具体这叫啥布局,问了几个人,不同人有不同的回答,我自己也叫不出啥名了,写这么多标签,是为了能想起这种布局界面,但是不知道该怎么搜关键词 的童鞋们多一些标签,也增加一些能搜到的可能性。具体效果如下所示,文字放不开的话,就另起一行,放的开就继续往后排。效果如下:代码实现:.wxml...

关键字:

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

类似这种效果:
微信小程序 流式布局 标签布局 自动布局 实现方案

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

效果如下:
微信小程序 流式布局 标签布局 自动布局 实现方案

代码实现:

.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