本文展示了如何使用WXML和WXSS实现电影卡片的设计，并通过JS实现了丰富的交互效果，包括图片预览、评分弹窗等功能。
效果
图片
蓝色图片的颜色可以用 Photoshop CS6 更改，鼠标放在图片上可以看到图片的文字
WXML
<view class="container">
<view class="wrap">
<view class="item" wx:for="{{list}}" wx:key="index">
<view class="top">
<view class="img">
<image src="{{item.img[0]}}"
bindtap="previewImage"
data-src="{{item.img[0]}}"
data-srclist="{{item.img}}">
</image>
</view>
<view class="desc">
<view class="title">{{item.name}}</view>
<view class="subtitle">{{item.subtitle}}</view>
<view class="type">{{item.type}}</view>
<view class="duration">{{item.producePlace}} / {{item.duration}}分钟</view>
<view class="opentime">{{item.releaseDate}} {{item.releasePlace}}</view>
<view class="score">
<view class="txt">{{item.score}}</view>
<view class="score-wrap">
<view class="startOrange" style="width:{{(item.score)*10}}%"></view>
<view class="startGray">
<image src="../../images/startGray.png"></image>
</view>
</view>
</view>
<view class="btn-group">
<button class="btn" bindtap="wantLook" data-index="{{index}}">
<text wx:if="{{item.isWant}}" style="margin-left:2rpx">已想看</text>
<text wx:else>想看</text>
<view class="icon" wx:if="{{item.isWant}}" style="left: 34rpx">
<image src="../../images/redHert.png"></image>
</view>
<view class="icon" wx:else>
<image src="../../images/hert.png"></image>
</view>
</button>
<button class="btn" hover-class="btnhover" bindtap="showDialog" data-index="{{index}}">
评分
<view class="icon">
<image src="../../images/start.png"></image>
</view>
</button>
</view>
</view>
</view>
<view class="btm">
<view class="tit-wrap" wx:if="{{item.plot}}" bindtap="showPlot" data-index="{{index}}">
<view class="txt">剧情简介</view>
<view class="arrow {{item.isPlot ? 'active' : ''}}"></view>
</view>
<view class="plot" hidden="{{!item.isPlot}}">{{item.plot}}</view>
</view>
</view>
</view>
<!-- 星级评价弹窗 -->
<view class="mask" wx:if="{{isShow}}" catchtouchmove='true'>
<view class="score-wrap">
<view class="starTit" wx:for="{{starTit}}" wx:key="index">
<view class="title">{{item.name}}：</view>
<view class="score-star">
<view class="item" wx:for="{{stars}}" wx:for-item="el" wx:for-index="elIndex" wx:key="elIndex">
<image class="half-star left"
src="{{item.score > el ? yel_left : gray_left}}"
data-index="{{index}}"
data-score="{{el + 1}}"
catchtap="selectLeft"></image>
<image class="half-star right"
src="{{item.score > el ? (item.score - el == 1 ? gray_right : yel_right) : gray_right}}"
data-index="{{index}}"
data-score="{{el + 2}}"
catchtap="selectRight"></image>
</view>
</view>
<view class="txt">{{starMap[item.score-1]}}</view>
</view>
</view>
<view class="btn">
<view class="cancel" catchtap="hiddenDialog">取消</view>
<view class="sure" catchtap="sure">确定</view>
</view>
</view>
</view>
JS
//获取应用实例
const app = getApp()
Page({
data: {
isShow: false, // 是否显示评价弹窗
list: [
{
name: '唐人街探案3',
subtitle: 'Detective Chinatown 3',
type: '喜剧 悬疑',
duration: '136',
score: '9.8',
producePlace: '中国大陆',
releaseDate: 1601510400000,
releasePlace: '中国大陆上映',
img: ['https://p0.meituan.net/movie/b0e0d6ce9914f37e7f9f6ade13e096342721150.jpg@464w_644h_1e_1c'],
plot: '继曼谷、纽约之后，东京再出大案。唐人街神探唐仁（王宝强 饰）、秦风（刘昊然 饰）受侦探野田昊（妻夫木聪 饰）的邀请前往破案。“CRIMASTER世界侦探排行榜”中的侦探们闻讯后也齐聚东京，加入挑战，而排名第一Q的现身，让这个大案更加扑朔迷离，一场亚洲最强神探之间的较量即将爆笑展开……'
},
{
name: '我在时间尽头等你',
subtitle: 'Love You Forever',
type: '爱情 奇幻 喜剧',
duration: '115',
score: '9.0',
producePlace: '中国大陆',
releaseDate: 1598313600000,
releasePlace: '中国大陆上映',
img: ['https://p0.meituan.net/moviemachine/7e6118993dbf0f304ac1dad4667fddda207318.jpg@218w_300h_1e_1c'],
plot: '林格（李鸿其 饰）一次次重启时空，只为与恋人邱倩（李一桐 饰）再次相遇。一生只爱一个人，希望开头是你，结尾也是你。2020年七夕最深情的告白: 我在时间尽头等你。'
},
{
name: '我和我的家乡',
subtitle: 'My Hometown And I',
type: '剧情 喜剧',
duration: '120',
score: '6.5',
producePlace: '中国大陆',
releaseDate: 1601510400000,
releasePlace: '中国大陆上映',
img: ['https://p0.meituan.net/movie/3e9c5b91940cd5c75a12916e66528a404269063.jpg@464w_644h_1e_1c'],
plot: ''
},
{
name: '八佰',
subtitle: 'The Eight Hundred',
type: '剧情 战争 历史',
duration: '147',
score: '8.2',
producePlace: '中国大陆',
releaseDate: 1597968000000,
releasePlace: '中国大陆上映',
img: ['https://p1.meituan.net/moviemachine/a448ca6a5f4dafb88067722303ca0cfd96002.jpg@464w_644h_1e_1c'],
plot: '1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。'
},
{
name: '姜子牙',
subtitle: 'JIANG ZIYA：Legend Of Deification',
type: '动画 动作 冒险',
duration: '110',
score: '9.6',
producePlace: '中国大陆',
releaseDate: 1601510400000,
releasePlace: '中国大陆上映',
img: ['https://p0.meituan.net/movie/3dc44919f0917b5823c867813f29fba42625689.jpg@464w_644h_1e_1c'],
plot: '昆仑弟子姜子牙（郑希 配音）率领众神伐纣，赢得封神大战胜利。即将受封成为众神之长的他，却因一时过失引得昆仑大乱，从此被贬北海，为世人所唾弃。十年后，因一个契机，姜子牙踏上重回昆仑的旅途。在战后的废墟之上，他重新找到自我，也洞悉了十年前的一切真相。'
},
{
name: '小妇人',
subtitle: 'Little Women',
type: '爱情 剧情',
duration: '135',
score: '7.8',
producePlace: '美国',
releaseDate: 1598313600000,
releasePlace: '中国大陆上映',
img: ['https://p0.meituan.net/movie/cdb164c203fc0c2465278ddd165e91c84503798.jpg@464w_644h_1e_1c'],
plot: '马奇夫人和四个多才多艺但性格各异的女儿一起过着平凡又温馨的生活。梅格贤惠温柔，是为爱痴狂的浪漫主义者；贝丝聪慧娴静，擅长钢琴；艾米年纪最小，有漂亮的外表和现实的头脑；而最特立独行的是乔，她有些男孩子气，热爱写作，在女孩都以嫁人为目标的年代，她立志成为一名独立女性。富有又帅气的青年劳里和乔青梅竹马两小无猜，对乔一见钟情，但乔面对劳里的表白却心烦意乱，决定独自前往纽约追求写作事业。经历了现实的洗礼后，乔逐渐明白了自己对于劳里的心意，却发现劳里即将迎娶妹妹艾米……'
}
],
itemIndex: null, // 当前点击的数据项的索引
stars: [0, 2, 4, 6, 8],
starTit: [ // 评价项
{name: '场景', score: 0},
{name: '特效', score: 0},
{name: '剧情', score: 0}
],
yel_left: '../../images/yellowStar-left.png', // 左半边黄色星星
yel_right: '../../images/yellowStar-right.png', // 右半边黄色星星
gray_left: '../../images/grayStar-left.png', // 左半边灰色星星
gray_right: '../../images/grayStar-right.png', // 右半边灰色星星
starMap: [ // 分值对应的文案
'超烂啊',
'超烂啊',
'比较差',
'比较差',
'一般般',
'一般般',
'比较好',
'比较好',
'棒极了',
'完美'
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.data.list.forEach((item) => {
item.isPlot = false
})
this.setData({
list: this.data.list
})
},
// 查看大图
previewImage(e) {
var current = e.target.dataset.src
var srclist = e.target.dataset.srclist
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: srclist // 需要预览的图片http链接列表
})
},
// 点击想看
wantLook(e) {
let index = e.currentTarget.dataset.index
this.data.list[index].isWant = !this.data.list[index].isWant
this.setData({
list: this.data.list
})
},
// 显示评分弹窗
showDialog(e) {
let index = e.currentTarget.dataset.index
this.setData({
isShow: true,
itemIndex: index
})
},
// 关闭评分弹窗
hiddenDialog() {
this.data.starTit.forEach((item) => {
item.score = 0
})
this.setData({
starTit: this.data.starTit,
isShow: false
})
},
// 选择左半边星星
selectLeft(e) {
let index = e.currentTarget.dataset.index
let score = e.currentTarget.dataset.score
this.data.starTit[index].score = score
this.setData({
starTit: this.data.starTit
})
},
// 选择右半边星星
selectRight(e) {
let index = e.currentTarget.dataset.index
let score = e.currentTarget.dataset.score
this.data.starTit[index].score = score
this.setData({
starTit: this.data.starTit
})
},
// 确认修改评分
sure() {
let score = 0
this.data.starTit.forEach((item) => {
score += item.score
})
if(!!score && score > 0) {
this.data.list[this.data.itemIndex].score = (score / 3).toFixed(1)
}
this.setData({
list: this.data.list
})
this.hiddenDialog()
},
// 展示剧情简介
showPlot(e) {
let index = e.currentTarget.dataset.index
this.data.list[index].isPlot = !this.data.list[index].isPlot
this.setData({
list: this.data.list
})
}
})
WXSS
page {
background: #f2f2f2;
}
.container {
width: 100%;
}
.wrap {
width: 100%;
padding: 30rpx 20rpx;
box-sizing: border-box;
}
.wrap .item {
width: 100%;
border: 1rpx solid #acacac80;
border-radius: 10rpx;
background: #fff;
padding: 15rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
}
.wrap .item .top {
height: 360rpx;
display: flex;
justify-content: flex-start;
}
.wrap .item .top .img {
flex: 0 0 260rpx;
height: 100%;
margin-right: 20rpx;
}
.wrap .item .top .img image {
width: 100%;
height: 100%;
}
.wrap .item .top .desc {
flex: 1;
width: 0;
height: 100%;
font-size: 28rpx;
position: relative;
}
/* 电影名称 */
.wrap .item .top .desc .title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 8rpx;
}
/* 电影副标题 */
.wrap .item .top .desc .subtitle {
margin-bottom: 20rpx;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* 电影类型 */
.wrap .item .top .desc .type {
margin-bottom: 10rpx;
}
/* 电影时长 */
.wrap .item .top .desc .duration {
margin-bottom: 10rpx;
}
/* 上映时间 */
.wrap .item .top .desc .opentime {
margin-bottom: 8rpx;
}
/* 星级分数 */
.wrap .item .top .desc .score {
width: 100%;
margin-bottom: 8rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.wrap .item .top .desc .score .txt {
color: #ffaa7f;
font-size: 30rpx;
margin-right: 10rpx;
}
.wrap .item .top .desc .score .score-wrap {
width: 90px;
height: 30rpx;
background: #dedede;
position: relative;
overflow: hidden;
}
.wrap .item .top .desc .score .score-wrap .startOrange {
width: 100%;
height: 100%;
background: #ffaa7f;
}
.wrap .item .top .desc .score .score-wrap .startGray {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.wrap .item .top .desc .score .score-wrap .startGray image {
width: 100%;
height: 100%;
}
/* 想看、评分 */
.wrap .item .top .desc .btn-group {
width: 100%;
display: flex;
justify-content: flex-start;
position: absolute;
left: 0;
bottom: 0;
}
.wrap .item .top .desc .btn-group .btn {
width: 186rpx;
height: 56rpx;
background: #ffaa7f;
border-radius: 30rpx;
font-size: 29rpx;
font-weight: normal;
text-align: center;
line-height: 56rpx;
color: #fff;
margin: 0;
padding: 0 0 0 40rpx;
position: relative;
}
.wrap .item .top .desc .btn-group .btn:first-child {
margin-right: 20rpx;
}
.wrap .item .top .desc .btn-group .btn .icon {
width: 28rpx;
height: 28rpx;
position: absolute;
top: 4rpx;
left: 44rpx;
}
.wrap .item .top .desc .btn-group .btn:first-child .icon {
top: 6rpx;
}
.wrap .item .top .desc .btn-group .btn .icon image {
width: 100%;
height: 100%;
}
.wrap .item .top .desc .btn-group .btnhover {
background: #ea986c;
}
/* 剧情简介 */
.wrap .item .btm {
width: 100%;
font-size: 28rpx;
}
.wrap .item .btm .tit-wrap {
width: 100%;
padding: 4rpx 15rpx 10rpx 0rpx;
box-sizing: border-box;
margin-top: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.wrap .item .btm .tit-wrap .txt {
font-size: 28rpx;
}
.wrap .item .btm .tit-wrap .arrow {
width: 15rpx;
height: 15rpx;
border-top: 2rpx solid #33373E;
border-left: 2rpx solid #33373E;
transform: rotate(-135deg);
margin-top: -10rpx;
margin-right: 4rpx;
}
.wrap .item .btm .tit-wrap .arrow.active {
margin-top: 8rpx;
transform: rotate(45deg);
}
.wrap .item .btm .plot {
text-indent: 2em;
}
/* 星级评价遮罩层 */
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
}
.mask .score-wrap {
width: 100%;
margin: 200rpx 0 100rpx;
}
.mask .score-wrap .starTit {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20rpx;
}
.mask .score-wrap .title {
font-size: 40rpx;
color: #fff;
display: flex;
justify-content: center;
}
.mask .score-wrap .txt {
width: 120rpx;
font-size: 40rpx;
color: #fff;
display: flex;
align-items: center;
margin-left: 20rpx;
}
.mask .score-wrap .score-star {
width: 140px;
height: 48rpx;
display: flex;
align-items: center;
}
.mask .score-wrap .score-star .item {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mask .score-wrap .score-star .item .half-star {
width: 24rpx;
height: 48rpx;
}
.mask .score-wrap .score-star .item .left {
margin-left: 4rpx;
}
.mask .score-wrap .score-star .item .right {
margin-right: 4rpx;
}
.mask .btn {
width: 100%;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
}
.mask .btn .cancel {
width: 160rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 10rpx;
background: #acacac;
color: #fff;
text-align: center;
margin-right: 40rpx;
}
.mask .btn .sure {
width: 160rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 10rpx;
background: #ffaa7f;
color: #fff;
text-align: center;
}
扫一扫
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
