小程序 瀑布流排版 點擊和左右滑動

wxml：

<!-- 第一個模塊 -->
<view class="WaterfallModular"> 
<!-- 第二模塊 -->
    <view class="Waterfall"> 
		 <!-- 第三模塊 -->
		    <view class="modular" wx:for="{{twoArraysOfWaterfalls}}">
				  <view class="WaterfallImage"><image src="{{item.WaterfallImage}}"></image>  </view>
					<view class="twoArraysOfWaterfallsTextOne"> <text>{{item.twoArraysOfWaterfallsTextOne}}</text></view>
				</view>
				<view class=""></view>
		</view>
</view>

wxss：

 .WaterfallModular{
  display: flex;
}
 .Waterfall{
  column-count: 2;
  column-gap: 10rpx;
  width: 100%;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
 }
 

 .modular{
  background-color: white;
  break-inside: avoid;
  box-sizing: border-box;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
 }
  .WaterfallImage image{
  width: 100%;
  height: 400rpx;
 }
 .twoArraysOfWaterfallsTextOne{
   font-size: 25rpx;
   font-weight: bold;
 }

js：

{
WaterfallImage: ‘/images/luobo.png’,
twoArraysOfWaterfallsTextOne: ‘4山東濰坊水果蘿蔔10斤新鮮沙窩青蘿蔔濰縣特產…’,
twoArraysOfWaterfallsImageTow: ‘…/detailsPageImges/nvtouxiang.png’,
twoArraysOfWaterfallsTextTow: ‘張小寶’,
twoArraysOfWaterfallsImageThree: ‘…/detailsPageImges/guanzhu.png’,
twoArraysOfWaterfallsTextThree: 815,
twoArraysOfWaterfallsImageThreeId: 3

},

點擊和左右滑動

wxml

<view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
<view class="nav-text {{index==tabCur?'afterClicking':'beforeClicking'}}">{{item.name}}
  <image class="navigationBarPictureStyle" src="../imges/111.png"></image>
</view>
</view>

wxss

/* 導航欄部分樣式 /
.navigationBarOutermostVew{ / 第一層view樣式 /
margin-left: 40rpx;
}
/ scroll-view{
overflow:auto;
} /
.navigationBarPictureStyle{ / 導航欄圖片樣式 /
width: 51.92rpx;
height: 19.48rpx;
display: flex;
margin: 0 auto;
}
.navigationBarViewStyle{ / 導航欄最外層view樣式 /
display: flex;
flex-direction: row;
padding-top: 30rpx;
}
.navbar {
/ 文本不換行 /
white-space: nowrap;
display: flex;
box-sizing: border-box;
align-items: center;
}
.nav-item {
padding-left: 25rpx;
padding-right: 25rpx;
display: inline-block;
}
/ 導航欄事件，單機改變樣式 /
/ 未點擊時的樣式 /
.beforeClicking{
font-size: 30rpx;
color: rgba(255, 255, 255, 0.8);
}
.beforeClicking image{
filter: opacity(0%); / 圖片透明處理 /
}
/ 點擊後時的樣式 */
.afterClicking{
font-size: 32rpx;
color: white;
font-weight: bold;
filter: none;
}
.afterClicking image{
filter: opacity(100%);
}

js 假數據

tabCur: 0, //默認選中
tabs: [{
name: ‘推薦’,
id: 0
},
{
name: ‘雙十一特惠’,
id: 1
},
{
name: ‘美食’,
id: 2
},
{
name: ‘旅行’,
id: 3
},
{
name: ‘你好2020’,
id: 4
},
{
name: ‘推薦’,
id: 5
},
{
name: ‘雙十一特惠’,
id: 6
},
{
name: ‘美食’,
id: 8
},
{
name: ‘旅行’,
id: 9
}
],