微信小程序 流式布局 标签布局 自动布局 实现方案
程序员文章站
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