添加grid-view的list

This commit is contained in:
zhl 2019-04-04 16:58:27 +08:00
parent 5c866095af
commit f5cb1300df
5 changed files with 150 additions and 9 deletions

View File

@ -0,0 +1,76 @@
<style lang="less">
.grid-cell-item{
width: 33.333333%;
text-align: center;
overflow: hidden;
}
.grid-cell-item .item-inner{
margin: 5rpx;
color: #666;
font-size: 28rpx;
}
.grid-cell-item .item-image{
width: 100%;
height: 300rpx;
}
.grid-cell-item .bigstar{
width: 120rpx;
height: 24rpx;
}
.grid-cell-item .item-name{
display: block;
font-size: 28rpx;
text-align: center;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<template>
<view class='grid-cell-item' @tap="gameTap({{item.gid}})">
<view class='item-inner'>
<image mode="aspectFill" src="{{item.icon}}" class='item-image'/>
<view>
<text class="item-name">{{item.name}}</text>
</view>
<rating :score.sync="currentScore"></rating>
</view>
</view>
</template>
<script>
import wepy from 'wepy';
import rating from './rating';
export default class gridCell extends wepy.component {
components = {
rating: rating,
};
props = {
item: {
type: Object,
default: null
},
showAll: {
type: Boolean,
default: false
}
}
data = {
}
computed = {
currentScore () {
if (this.item && this.item.score) {
return this.item.score;
} else {
return 0;
}
}
}
methods = {
gameTap (url, e) {
this.$emit('gameCellTap', url)
}
}
}
</script>

48
src/components/rating.wpy Normal file
View File

@ -0,0 +1,48 @@
<style lang="less">
.com-rating {
display: inline-block;
font-size: 1.2em;
letter-spacing: .3em;
}
.com-rating .rating-on,
.com-rating .rating-off {
display: inline-block;
}
.com-rating .rating-on {
color: #f6d031;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
}
.com-rating .rating-off {
color: #DBDBDB;
padding: 0;
margin: 0;
}
</style>
<template name="rating">
<view class='com-rating'>
<repeat for="{{[1,2,3,4,5]}}" item="item">
<view class='rating-on'
style='width:{{score >= (maxScore/5)*item ? 1 : score < (maxScore/5)*(item-1) ? 0 : (score*10)%(maxScore/5*10)/(maxScore/5*10)}}em'
><i class='icon-star-full'></i></view>
<view class='rating-off'><i class='icon-star-full'></i></view>
</repeat>
</view>
</template>
<script>
import wepy from 'wepy';
export default class rating extends wepy.component {
props = {
score: {type: Number, default: 2.5},
maxScore: {type: Number, default: 5}
};
data = {};
methods = {};
}
</script>

View File

@ -134,11 +134,11 @@
this.$toGameInfo(gid);
},
async toSearch() {
// wepy.navigateTo({
// url: '/pages/search'
// })
let movie = 'http://iqiyi.kuyun-bofang.com/20190208/eebojrT3/index.m3u8'
this.$toMovie(movie, '流浪地球');
wepy.navigateTo({
url: '/pages/search'
})
// let movie = 'http://iqiyi.kuyun-bofang.com/20190208/eebojrT3/index.m3u8'
// this.$toMovie(movie, '流浪地球');
},
async showInviteView() {
await this.updateInviteViewData();

View File

@ -4,6 +4,11 @@
.container {
background-color:#FFFFFF;
}
.grid-list {
display: flex;
flex-wrap: wrap;
padding: 5rpx;
}
</style>
<template>
@ -43,9 +48,16 @@
</view>
</view>
</view>
<repeat for="{{records}}" item="item" >
<recordCell :item="item" @gameCellTap.user="gameTap" :showAll.sync = 'showAll'/>
</repeat>
<view >
<repeat for="{{records}}" item="item" >
<recordCell :item="item" @gameCellTap.user="gameTap" :showAll.sync = 'showAll'/>
</repeat>
</view>
<!--<view class="grid-list">-->
<!--<repeat for="{{records}}" item="item" >-->
<!--<gridCell :item="item" @gameCellTap.user="gameTap" :showAll.sync = 'showAll'/>-->
<!--</repeat>-->
<!--</view>-->
<zanLoadmore :loading.sync="loading" :nodata.sync="noData" :nomore.sync="noMore" nodata_str="暂无数据"></zanLoadmore>
<toast/>
</view>
@ -59,6 +71,7 @@
import tips from '../mixins/tips';
import cfg from '../mixins/cfg';
import recordCell from '../components/game-cell';
import gridCell from '../components/grid-cell';
import recentGame from '../components/recent-game';
import zanLoadmore from '../components/zan-loadmore';
import global from '../common/global';
@ -74,6 +87,7 @@
components = {
toast: Toast,
recordCell: recordCell,
gridCell: gridCell,
recentGame: recentGame,
zanLoadmore: zanLoadmore
};

View File

@ -1,6 +1,6 @@
@font-face {
font-family: 'xmjlicons';
src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
@ -29,6 +29,9 @@
.icon-search:before {
content: "\e986";
}
.icon-star-full:before {
content: "\e9d9";
}
.icon-checkmark:before {
content: "\ea10";
}