微信小程序横向滚动卡片列表模板
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
样例展示~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbjkee
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01