1 前言
在开发微信小程序时，横向可滚动卡片列表是一个必不可缺的页面组件。其不仅美观还可以节省屏幕空间。具体截图如下：
2 代码
主要用的是scroll-x，具体代码如下：
wxml
<scroll-view scroll-x class="scroll-x"> <view style="display: inline-block;" class="act" bindtap="huodong" wx:for="{{activity_list}}" wx:key="{{item}}" data-id="{{item.activity_id}}"> <view class="activity_photo"><image src="{{item.activity_photo}}" style="height: 220rpx;width:340rpx;border-radius:10rpx"></image></view> <view class="botton_view"> <view class="wenzi"><text class="ziti">{{item.activity_name}}</text></view> <view class="next"> <view class="number"><image src="/image/for_li/renshu.png" style="height: 40rpx;width:40rpx"></image></view> <view class="renshu"><text class="ziti">{{item.num}}人</text></view> </view> </view> </view> </scroll-view>
附：renshu.png
wxss
.scroll-x{ margin: 5rpx; height:500rpx; white-space:nowrap; display:flex; justify-content: space-around; } .act{ height: 390rpx; width: 350rpx; display: flex; border-radius:10rpx; border-style: solid; box-shadow:0px 2px 4px 2px #DDDDDD; border-width: 0rpx; flex-direction: column; justify-content:space-around; align-items: center; } .activity_photo{ width: 350rpx; height: 230rpx; } .botton_view{ width: 350rpx; height: 160rpx; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .ziti{ font-size: 30rpx; } .next{ width:150rpx; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .number{ height: 40rpx; }
js
Page({ /** * 页面的初始数据 */ data: { activity_list:[{activity_photo:"/image/activity/huanwei.jpg",activity_name:"环卫工",num:23}, {activity_photo:"/image/activity/huanwei.jpg",activity_name:"环卫工",num:23}, {activity_photo:"/image/activity/huanwei.jpg",activity_name:"环卫工",num:23}], }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
附：huanwei.jpg
样例展示~
