Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
4f2b2e5e by simon
Options

默认提交

1 parent 9f6b00c9
Expand all
Inline Side-by-side
Showing 16 changed files with 402 additions and 5 deletions
......@@ -2,6 +2,7 @@
"pages": [
"pages/index/index",
"pages/detail/detail",
"pages/personal-list/personal-list",
"pages/more/more",
"pages/poster-example/poster-example",
"pages/authorize/authorize",
......@@ -16,6 +17,7 @@
"usingComponents": {
"authorize-comp": "../../component/authorize-comp/authorize-comp",
"empty-tips": "../../component/empty-tips/empty-tips",
"shortcut": "../../component/shortcut/shortcut",
"van-popup": "../../ui/vant-weapp/popup/index",
"van-sticky": "../../ui/vant-weapp/sticky/index",
"van-tab": "../../ui/vant-weapp/tab/index",
......
<view class="demo-item">demo-item</view>
<view class="comp">demo-item</view>
......
import {
getBindtapData
} from '../../utils/util';
let app = getApp();
Component({
// 样式隔离
// 详见 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
// isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
// apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
// shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
options: {
styleIsolation: 'apply-shared'
},
properties: {
types: {
type: Array,
value: ["home", "return"]
}
},
data: {
// 这里是一些组件内部数据
typeIconMap: {
"home": "iconhome",
"return": "iconreturn"
}
},
methods: {
// 点击按按钮
onTapHandler(evt) {
let curType = getBindtapData(evt);
console.log("curType:", curType);
switch (curType) {
case "home":
app.router.push({
openType: "reLaunch",
path: "index"
})
break;
case "return":
app.router.push({
openType: "back"
})
break;
default:
break;
}
}
}
})
.comp {
position: fixed;
bottom: 10%;
right: 2%;
z-index: 91;
color: #ffffff;
$btnSize: 80px;
.btn {
width: $btnSize;
height: $btnSize;
margin-bottom: 24px;
border-radius: $btnSize;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #000000, $alpha: 0.6);
}
.iconfont {
font-size: 48px;
}
}
<view class="comp">
<view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn">
<span class="iconfont {{typeIconMap[item+''] }}"></span>
</view>
</view>
......@@ -33,11 +33,12 @@ Page({
* 做加载更多操作
*/
onReachBottom() {
return;
if (this.data.dataList.length < this.data.total) {
this.setData({
page: this.data.page + 1
});
this.queryDataList();
// this.queryDataList();
}
},
......@@ -49,6 +50,16 @@ Page({
})
},
/**
* 到个人列表页面
*/
toPersonalList() {
app.router.push({
path: "personalList",
})
},
/**
* 请求DataList
*/
......
......@@ -2,6 +2,8 @@
@import '../../assets/scss/utils';
.page {
padding-bottom: $pageBottom;
.bgc {}
.bg {}
......@@ -16,6 +18,7 @@
}
}
// 视频详情
.detail {
position: relative;
width: 100%;
......@@ -59,6 +62,7 @@
}
}
// 功能区，显示用户信息等
.func {
position: relative;
@extend .bb;
......@@ -140,8 +144,55 @@
}
.tit{
// 功能区小标题
.fc-tit {
@extend .bb;
padding: 0 24px;
}
// 广告
.ad {}
// 装饰物 
.decoration {}
// 更多推荐
.more {
width: $contentWidth;
margin: 64px auto 0;
&-title {
color: #a2242e;
font-size: 48px;
font-weight: bold;
text-align: center;
}
// 推荐列表
&-list {
margin: 36px auto 0;
&-item {
display: flex;
justify-content: space-between;
border-bottom: solid 2px #dfdfdf;
padding: 24px 0;
.tit {
@extend .bb;
padding: 24px 0;
height: 230px;
flex: 1;
font-size: 36px;
@include ellipsis(4);
}
.poster {
width: 350px;
height: 230px;
border-radius: 8px;
}
}
}
}
}
......
......@@ -4,6 +4,7 @@
<view class="app__content main">
<view class="top-space"></view>
<view class="content">
<!-- 视频详情 -->
<view class="detail">
<video objectFit="cover" class="vid" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" />
<view class="btn-wrap">
......@@ -17,8 +18,9 @@
</button>
</view>
</view>
<!-- 功能区 -->
<view class="func">
<view class="user">
<view bindtap="toPersonalList" class="user">
<image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
<view class="desc">
<view class="t1 name">我爱我家</view>
......@@ -35,7 +37,23 @@
</view>
</view>
</view>
<view class="tit">超有创意的全家福，看了你也想拍！</view>
<!-- 功能区小标题 -->
<view class="fc-tit">超有创意的全家福，看了你也想拍！</view>
<!-- 广告 -->
<view class="ad"></view>
<!-- 装饰物 -->
<view class="decoration"></view>
<!-- 更多推荐 -->
<view class="more">
<view class="more-title">-- 更多推荐欣赏 --</view>
<view class="more-list">
<view wx:for="{{2}}" wx:key="{{index}}" class="more-list-item">
<view class="tit">新政策来了！家有小孩的都要过来看看</view>
<image class="poster" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
</view>
</view>
</view>
</view>
</view>
</view>
<shortcut></shortcut>
......
......@@ -2,6 +2,9 @@
@import '../../assets/scss/utils';
.page {
padding-bottom: $pageBottom;
color: #333333;
font-size: 24px;
......
import {
getBindtapData
} from '../../utils/util'
let app = getApp();
Page({
data: {
active: 0
},
onLoad(options) {},
initData() {
},
onChange(event) {
wx.showToast({
title: `切换到标签 ${event.detail.name}`,
icon: 'none'
});
},
onVanTabsHandler(event) {
console.log("event:", event);
let {
index,
title
} = event.detail;
},
onVideoHandler(evt) {
let curItem = getBindtapData(evt);
let curIndex = getBindtapData(evt, "index");
app.router.push({
path: "detail",
query: {
c: curIndex + ""
}
})
console.log("curItem:", curItem);
console.log("curIndex:", curIndex);
},
/**
* 获取列列表
*/
queryList() {
}
})
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
.page {
padding-bottom: $pageBottom;
color: #333333;
font-size: 24px;
.bgc {
background-color: #efefef;
}
.bg {}
.main {
.top-space {
height: 120px;
}
.personal {
position: fixed;
top: 0;
z-index: 1;
@extend .bb;
padding: 24px 32px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
border-bottom: solid 1px #efefef;
.name {
font-size: 32px;
font-weight: bold;
}
.portrait {
width: 64px;
height: 64px;
border-radius: 64px;
}
}
.content {
position: relative;
}
.list {
position: relative;
margin: 0 auto;
width: $contentWidth;
&-item {
position: relative;
background-color: #ffffff;
border-radius: 16px;
margin: 24px auto;
&-video {
display: flex;
justify-content: center;
position: relative;
width: $contentWidth;
.vid {
@include border-top-radius(16px);
width: $contentWidth;
pointer-events: none;
}
.tit {
color: #ffffff;
@extend .bb;
padding: 0 24px;
position: absolute;
width: 100%;
height: 64px;
line-height: 64px;
bottom: 0;
background-color: rgba($color: #000000, $alpha: 0.6);
@include border-top-radius(8px);
@include ellipsis(1);
}
}
&-func {
@extend .bb;
padding: 24px 24px;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
.user {
display: flex;
align-items: center;
.portrait {
width: 48px;
height: 48px;
border-radius: 48px;
}
.name {
padding-left: 12px;
}
}
.share {
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
// width: 132px;
height: 48px;
color: #ffffff;
background-color: #3ec03c;
border-radius: 8px;
margin: 0;
.iconfont {
font-size: 32px;
}
.t1 {
padding: 0 6px;
}
}
}
}
}
}
.van-tab--active {
color: #fc464a;
}
.van-hairline--top-bottom:after {
border-width: 0;
}
}
<view class="page">
<view class="app__bgc bgc"></view>
<view class="app__bg bg"></view>
<!-- <view class="app__top-shadow"></view> -->
<view class="app__content main">
<view class="top-space"></view>
<view class="personal">
<view class="name">我爱我家 的视频列表</view>
<image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
</view>
<view class="content">
<view class="list">
<view bindtap="onVideoHandler" wx:for="{{8}}" wx:key="index" data-data="{{item}}" data-index="{{index}}" class="list-item">
<view class="list-item-video">
<video objectFit="cover" class="vid" poster="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/7e91e8a4c7b84e6fa4bada7c8617c9cf.mp4" />
<view class="tit">这是一个视频</view>
</view>
<view class="list-item-func">
<view class="user">
<image class="portrait" mode="aspectFill" src="https://kd.cdn.xyiyang.com/pro/mzczcradmin/008194acee794506aac4c7200ce654dc.jpg" />
<text class="name">我爱我家</text>
</view>
<button class="share">
<span class="t1 iconfont iconwechat"></span>
<span class="t1">分享</span>
</button>
</view>
</view>
</view>
</view>
</view>
</view>
<shortcut></shortcut>
const routerPath = {
index: '/pages/index/index',
detail: '/pages/detail/detail',
personalList: '/pages/personal-list/personal-list',
authorize: '/pages/authorize/authorize', // 授权
example: '/pages/example/example',
more: '/pages/more/more',
......