miniprogram / ruiwang · 提交

转到一个项目

作者 乔蒙蒙
提交 bf7f3467e433a0a7ae896eb4a9396c787f266f28 1 个父辈 dcf41fa5

对接接口

内嵌 并排对比
正在显示 19 个修改的文件 包含 462 行增加 和 197 行删除
//app.js
App({
data: {
minscreenHeight: 0,
... ... @@ -20,6 +23,7 @@ App({
duration: 100
})
},
/**
* 自定义post函数，返回Promise
* +-------------------
... ...
... ... @@ -14,14 +14,14 @@ page {
/* box-sizing: border-box; */
}
.drop_img {
width: 30rpx;
height: 27rpx;
/* width: 30rpx;
height: 27rpx; */
cursor: pointer;
margin: 0 auto 40rpx;
}
.drop_img image {
width: 100%;
height: 100%;
width: 46rpx;
height: 22rpx;
}
/* 客服 */
... ...
// pages/about/about.js
var WxParse = require('../../wxParse/wxParse.js');
const app = getApp();
Page({
/**
... ... @@ -10,26 +11,92 @@ Page({
],
minscreenHeight: 0,
scrollTop: 0,
name: '',
phone: "",
company:'',
content_img: "",
},
onPageScroll: function (e) { // 获取滚动条当前位置
console.log(111);
console.log(e.scrollTop);
console.log(minscreenHeight);
this.setData({
scrollTop: e.scrollTop
})
// console.log(e)
this.setData({
scrollTop: e.scrollTop
})
},
goTop: function () {
app.goTop()
app.goTop()
},
// 返回上一页
backFun: function () {
wx.navigateBack({
changed: true
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let url = '/portal/Api/aboutUs';
app.post(url, {}).then((res) => {
console.log('res', res);
this.setData({
content_img: res.about,
link: res.link,
});
WxParse.wxParse('content_img', 'html', this.data.content_img, this, 5);
WxParse.wxParse('link', 'html', this.data.link, this, 5);
}).catch((err) => {
console.log(err);
})
},
// 姓名
nameFun: function(e) {
let that = this;
// console.log(e.detail.value)
that.setData({
name: e.detail.value,
})
},
// 手机号
phoneFun: function(e) {
let that = this;
// console.log(e.detail.value)
that.setData({
phone: e.detail.value,
})
},
// 行业
companyFun: function (e) {
let that = this;
// console.log(e.detail.value)
that.setData({
company: e.detail.value,
})
},
// 提交
subFun: function() {
let url = '/portal/Api/form';
var that = this;
let data = {
name: that.name,
mobile: that.phone,
firm: that.company,
};
app.post(url, data).then((res) => {
// console.log('res', res);
if(res.type == 1) {
wx.showToast({
title: '成功',
icon: 'succes',
duration: 1000,
mask: true
})
}
}).catch((err) => {
console.log(err);
})
},
/**
* 生命周期函数--监听页面初次渲染完成
... ...
... ... @@ -4,7 +4,9 @@
<image src='http://pjq0ww1cj.bkt.clouddn.com/about.png'></image>
</view>
<view class='about_content'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/about_content.png' mode="widthFix"></image>
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:content_img.nodes}}"/>
<!-- <image src='http://pjq0ww1cj.bkt.clouddn.com/about_content.png' mode="widthFix"></image> -->
</view>
<view class='about_contact_way'>
<view class='about_title'>
... ... @@ -12,7 +14,9 @@
<view>联系我们</view>
</view>
<view class='about_contact_box'>
<view class='about_contact_list'>
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:link.nodes}}"/>
<!-- <view class='about_contact_list'>
<view>全国服务热线：</view>
<view class='about_contact_right'>400-6262-686</view>
</view>
... ... @@ -27,9 +31,10 @@
<view class='about_contact_list'>
<view>北京运营中心：</view>
<view class='about_contact_right'>北京亦庄经济开发区东经海三路天骥智谷33号楼4层</view>
</view>
</view> -->
</view>
</view>
<!-- 申请 -->
<view class='sub_apply_box'>
<view class='sub_apply_title'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/apply.png'></image>
... ... @@ -40,7 +45,7 @@
<view class='sub_input_left'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/user.png' mode="widthFix"></image>
</view>
<input type='text' maxlength='10' placeholder="请输入您的姓名" />
<input type='text' maxlength='10' bindchange="nameFun" placeholder="请输入您的姓名" />
<text>姓名请输入不超过10个字</text>
</view>
</view>
... ... @@ -50,19 +55,19 @@
<view class='sub_input_left'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/input_phone.png' mode="widthFix"></image>
</view>
<input type='number' maxlength='11' placeholder="请输入您的联系方式" />
<input type='number' maxlength='11' bindchange="phoneFun" placeholder="请输入您的联系方式" />
</view>
</view>
<view class='sub_apply_list'>
<view class='sub_apply_must'>*</view>
<view class='sub_apply_input'>
<!-- <view class='sub_apply_must'>*</view> -->
<view class='sub_apply_input' style='margin-left:30rpx;'>
<view class='sub_input_left'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/company.png' mode="widthFix"></image>
</view>
<input type='text' placeholder="请输入您的所在行业" />
<input type='text' bindchange="companyFun" placeholder="请输入您的所在行业" />
</view>
</view>
<view class='sub_btn'>
<view class='sub_btn' bindtap='subFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/sub_btn.png'></image>
</view>
</view>
... ... @@ -73,7 +78,10 @@
</button>
</view>
<!-- 返回顶部 -->
<view class='chat_peo return_top' wx:if="{{scrollTop>minscreenHeight}}" bindtap="goTop">
<view class='chat_peo return_top' wx:if="{{scrollTop>minscreenHeight}}" bindtap="goTop" >
<image src='http://pjq0ww1cj.bkt.clouddn.com/dingbu.png'></image>
</view>
<view class='drop_img' bindtap="backFun">
<image src='http://pjq0ww1cj.bkt.clouddn.com/left.png'></image>
</view>
</view>
... ...
/* pages/about/about.wxss */
@import "../../wxParse/wxParse.wxss";
.about_wrap {
width: 100%;
height: 100%;
overflow: auto;
}
.about_top {
width: 100%;
... ... @@ -146,8 +146,13 @@
/* 返回上一页 */
.drop_img {
position: fixed;
left: 50%;
bottom: 20rpx;
margin: 0 0 0 -23rpx;
}
... ...
// pages/application/application.js
const app = getApp();
var touchDot = 0;//触摸时的原点
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理时间记录
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'http://pjq0ww1cj.bkt.clouddn.com/app_banner01.png',
'http://pjq0ww1cj.bkt.clouddn.com/app_banner01.png',
'http://pjq0ww1cj.bkt.clouddn.com/app_banner01.png',
],
imgUrls: [],
connectButton: [
{ className: "", text: "在线客服", bindtap: "" }
],
autoplay: true,
interval: 5000,
interval: 2000,
duration: 1000,
circular: true,
currentSwiper: 0,
... ... @@ -49,13 +49,59 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let url = '/portal/Api/scene';
app.post(url, {}).then((res) => {
// console.log('res', res);
this.setData({
imgUrls: res.list
})
}).catch((err) => {
console.log(err);
})
},
jumpFun: function (e) {
wx.navigateTo({
url: '../about/about'
})
},
// 返回上一页
backFun: function () {
wx.navigateBack({
changed: true
});
},
// 触摸开始事件
touchStart: function (e) {
touchDot = e.touches[0].pageX; // 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function () {
time++;
}, 100);
},
// 触摸移动事件
touchMove: function (e) {
var touchMove = e.touches[0].pageX;
console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
// 向左滑动
if (touchMove - touchDot <= -40 && time < 10) {
wx.navigateTo({
url: '../about/about'
})
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10) {
console.log('向右滑动');
// alert("已经是第一页了")
wx.navigateBack({
changed: true
});
}
},
// 触摸结束事件
touchEnd: function (e) {
clearInterval(interval); // 清除setInterval
time = 0;
},
/**
* 生命周期函数--监听页面初次渲染完成
... ... @@ -96,9 +142,7 @@ Page({
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
wx.navigateTo({
url: '../about/about'
})
},
/**
... ...
{
"navigationBarTitleText": "政府案例"
"navigationBarTitleText": "应用场景"
}
\ No newline at end of file
... ...
<!--pages/application/application.wxml-->
<view class='app_lication_banner'>
<view class='app_lication_banner' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
<swiper
bindchange='swiperChange'
autoplay="{{autoplay}}"
... ... @@ -7,25 +7,26 @@
duration="{{duration}}"
circular="{{circular}}"
>
<block wx:for="{{imgUrls}}" wx:key>
<swiper-item>
<image src="{{item}}" class="slide-image" width="100%" height="100%" />
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item catchtouchmove="stopTouchMove">
<image src="{{item.url}}" class="slide-image" width="100%" height="100%" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<block wx:for="{{imgUrls}}" wx:key="index">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
<!-- 跳转下一页 -->
<view class='drop_img' bindtap="jumpFun">
<image src='http://pjq0ww1cj.bkt.clouddn.com/drop.png'></image>
<view class='drop_img'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/left.png' bindtap='backFun' style='margin-right:200rpx;'></image>
<image src='http://pjq0ww1cj.bkt.clouddn.com/right.png' bindtap="jumpFun"></image>
</view>
<!-- 客服 -->
<view class='chat_peo' bindtap="jumpFun">
<view class='chat_peo'>
<button open-type="contact" class='contacButton'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
</button>
... ...
... ... @@ -42,7 +42,7 @@ background-color: #FB7F47;
position: absolute;
bottom: 40rpx;
left: 50%;
margin-left: -15rpx;
margin-left: -146rpx;
}
... ...
// pages/case/case.js
const app=getApp();
var touchDot = 0;//触摸时的原点
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理时间记录
Page({
/**
... ... @@ -68,7 +71,7 @@ Page({
},
goFun(e) {
wx.navigateTo({
url: '../caseList/caseList?html=' + e.currentTarget.dataset.html
url: '../caseList/caseList?html=' + e.currentTarget.dataset.html+ '&&id=' + e.currentTarget.dataset.id
})
},
... ... @@ -78,6 +81,43 @@ Page({
onLoad: function (options) {
this.getlist();
},
// 触摸开始事件
touchStart: function (e) {
touchDot = e.touches[0].pageX; // 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function () {
time++;
}, 100);
},
// 触摸移动事件
touchMove: function (e) {
var touchMove = e.touches[0].pageX;
console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
// 向左滑动
if (touchMove - touchDot <= -40 && time < 10) {
wx.navigateTo({
url: '../application/application'
});
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10) {
console.log('向右滑动');
// alert("已经是第一页了")
wx.navigateBack({
changed: true
});
}
},
// 触摸结束事件
touchEnd: function (e) {
clearInterval(interval); // 清除setInterval
time = 0;
},
backFun: function() {
wx.navigateBack({
changed: true
});
},
/**
* 生命周期函数--监听页面初次渲染完成
... ... @@ -123,9 +163,7 @@ Page({
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
wx.navigateTo({
url: '../application/application'
})
},
/**
... ...
<!--pages/case/case.wxml-->
<view class='case_wrap'>
<view class='case_wrap' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
<!--banner -->
<view class='case_banner_box'>
<swiper bindchange='swiperChange'
... ... @@ -30,41 +30,42 @@
</view>
</view>
<view class='case_content'>
<view class='case_list' data-html="政府案例" bindtap='goFun'>
<view class='case_list' data-html="政府案例" data-id='1' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/zhengfu.png'></image>
<view class='case_list_text'>政府</view>
</view>
<view class='case_list' data-html="地产案例" bindtap='goFun'>
<view class='case_list' data-html="地产案例" data-id='3' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/dichan.png'></image>
<view class='case_list_text'>地产</view>
</view>
<view class='case_list' data-html="制造案例" bindtap='goFun'>
<view class='case_list' data-html="制造案例" data-id='2' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/zhizao.png'></image>
<view class='case_list_text'>制造</view>
</view>
<view class='case_list' data-html="教育案例" bindtap='goFun'>
<view class='case_list' data-html="教育案例" data-id='5' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/jiaoyu.png'></image>
<view class='case_list_text'>教育</view>
</view>
<view class='case_list' data-html="金融案例" bindtap='goFun'>
<view class='case_list' data-html="物流案例" data-id='4' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/jinrong.png'></image>
<view class='case_list_text'>金融</view>
<view class='case_list_text'>物流</view>
</view>
<view class='case_list' data-html="零售案例" bindtap='goFun'>
<view class='case_list' data-html="零售案例" data-id='6' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/lingshou.png'></image>
<view class='case_list_text'>零售</view>
</view>
</view>
<view class='drop_img' bindtap="jumpFun">
<image src='http://pjq0ww1cj.bkt.clouddn.com/drop.png'></image>
<view class='drop_img'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/left.png' style='margin-right:200rpx;' bindtap='backFun'></image>
<image src='http://pjq0ww1cj.bkt.clouddn.com/right.png' bindtap="jumpFun"></image>
</view>
</view>
<!-- 客服 -->
<view class='chat_peo' >
<button open-type="contact" class='contacButton'>
<button open-type="contact" class='contacButton'>
<!-- <button open-type="contact" class='contacButton'> -->
<image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
</button>
<!-- </button> -->
</button>
</view>
... ...
// pages/caseDetail/caseDetail.js
// var WxParse = require('../../wxParse/wxParse.js');
var WxParse = require('../../wxParse/wxParse.js');
const app = getApp();
Page({
... ... @@ -7,23 +7,18 @@ Page({
* 页面的初始数据
*/
data: {
imgUrls: [
'http://pjq0ww1cj.bkt.clouddn.com/detail01.png',
'http://pjq0ww1cj.bkt.clouddn.com/detail01.png',
'http://pjq0ww1cj.bkt.clouddn.com/detail01.png',
],
imgUrls: [],
connectButton: [
{ className: "", text: "在线客服", bindtap: "" }
],
currentSwiper: 0,
autoplay: true,
interval: 5000,
duration: 1000,
circular: true,
listStatus: 0,
data: {},
minscreenHeight: 0,
scrollTop: 0,
isPlay: false,
content_1: "",
content_2: "",
},
changeIndicatorDots(e) {
this.setData({
... ... @@ -56,6 +51,7 @@ Page({
})
},
onPageScroll: function (e) { // 获取滚动条当前位置
// console.log(e)
this.setData({
scrollTop: e.scrollTop
})
... ... @@ -64,30 +60,52 @@ Page({
app.goTop()
},
//点击图片切换视频
play() {
this.setData({ isPlay: !this.data.isPlay });
},
//视频暂停
clickStop() {
this.setData({ isPlay: false });
},
swiperChange: function (e) { //切换轮播图
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options);
// let url = '/portal/Api/category';
// let data = {
// categoryId: options.id,
// };
// app.post(url, data).then((res) => {
// // console.log('res', res);
// if (res.type) {
// this.setData({
// imgUrls: res.banner,
// data: res,
// });
// let article = res.content_1;
// WxParse.wxParse('article', 'html', article, this, 5);
// }
// }).catch((err) => {
// console.log(err);
// })
let url = '/portal/Api/category';
let data = {
categoryId: options.id,
};
app.post(url, data).then((res) => {
// console.log('res', res);
for (var index in res.image) {
res.image[index].type = "image";
}
if (res.video_type == true) {
res.image.splice(0, 0, {
url: res.video,
type: "video",
video_img: res.video_img,
});
}
this.setData({
imgUrls: res.image,
data: res,
content_1: res.content_1,
content_2: res.content_2,
});
WxParse.wxParse('content_1', 'html', this.data.content_1, this, 5);
WxParse.wxParse('content_2', 'html', this.data.content_2, this, 5);
}).catch((err) => {
console.log(err);
})
},
... ...
... ... @@ -2,17 +2,36 @@
<view class='case_detail_page'>
<view class='case_detail_top'>
<view class='case_detail_banner'>
<swiper bindchange='swiperChange'
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key>
<swiper-item>
<image src="{{item}}" class="slide-image" width="100%" height="100%" />
</swiper-item>
</block>
<swiper autoplay="{{false}}" interval="2000" duration="500" circular="{{true}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<!-- <navigator url="{{item.url}}" hover-class="navigator-hover"> -->
<view class="index_top">
<block wx:if="{{item.type == 'video'}}" >
<view wx:if="{{isPlay}}" class="video-box" catchtap="play">
<video src="{{item.url}}" wx:if="{{item.type == 'video'}}" class="slide-image" autoplay="{{true}}"
controls="{{true}}" bindpause="clickStop"></video>
</view>
<view wx:else class="video-box {{item.video_img!==''?'position-re':''}}" catchtap="play">
<block wx:if="{{item.video_img !== ''}}">
<image src="{{item.video_img}}"
class="slide-image fmImg" mode="aspectFill">
</image>
<image src='http://pjq0ww1cj.bkt.clouddn.com/video_btn.png' class="video_btn {{item.video_img!==''?'position-ab':''}}"></image>
<!-- <view class="iconfont icon-ziyuan "></view> -->
</block>
<block wx:else>
<view class="iconfont icon-ziyuan"></view>
</block>
</view>
</block>
<block wx:else>
<image src="{{item.url}}" wx:if="{{item.type == 'image'}}" class="slide-image banner" mode="aspectFill"/>
</block>
</view>
<!-- </navigator> -->
</swiper-item>
</block>
</swiper>
<view class='dots_box'>
<view class="dots">
... ... @@ -23,12 +42,9 @@
</view>
</view>
<view class='case_info'>
<view class='case_title'>某政府科技金融中心</view>
<view class='case_title'>{{data.title}}</view>
<view class='lable_list_box'>
<view class='lable_list'>政府</view>
<view class='lable_list'>工作效率</view>
<view class='lable_list'>业务分析</view>
<view class='lable_list'>快速报表</view>
<view class='lable_list' wx:for="{{data.label}}" wx:key="index">{{item.name}}</view>
</view>
</view>
</view>
... ... @@ -45,12 +61,14 @@
</view>
<view class='info_box'>
<view class='info_list' wx:if="{{listStatus==0}}">
<!-- <import src="/wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/> -->
<image src="http://pjq0ww1cj.bkt.clouddn.com/jianjie.png" mode='widthFix'></image>
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:content_1.nodes}}"/>
<!-- <image src="http://pjq0ww1cj.bkt.clouddn.com/jianjie.png" mode='widthFix'></image> -->
</view>
<view class='info_list' wx:else>
<image src="http://pjq0ww1cj.bkt.clouddn.com/shishi.png" mode='widthFix'></image>
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:content_2.nodes}}"/>
<!-- <image src="http://pjq0ww1cj.bkt.clouddn.com/shishi.png" mode='widthFix'></image> -->
</view>
</view>
</view>
... ...
/* pages/caseDetail/caseDetail.wxss */
/* @import "/wxParse/wxParse.wxss"; */
@import "../../wxParse/wxParse.wxss";
.case_detail_page {
/* height: 100%; */
background: #F0ECEA;
... ... @@ -16,12 +16,57 @@
.case_detail_banner swiper {
width: 100%;
display: block;
height: 466rpx;
}
.case_detail_banner swiper image {
.case_detail_banner swiper image.banner {
width: 100%;
height: 100%;
}
.index_top {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
}
.fmImg {
width: 100%;
height: 100%;
}
.index_top video {
width: 100%;
height: 100%;
}
.video-box {
width: 100%;
height: 100%;
/* background: #000; */
display: flex;
align-items: center;
justify-content: center;
}
.video_btn {
width: 78rpx;
height: 78rpx;
position: absolute;
top: 50%;
left: 50%;
margin-left: -39rpx;
margin-top: -39rpx;
}
.position-re {
display: block;
/* position: relative; */
}
.position-ab {
position: absolute;
top: 46%;
left: 47%;
}
/* 小圆点 */
.dots_box {
width: 100%;
height:54rpx;
... ... @@ -126,6 +171,9 @@ background-color: #FB7F47;
}
.info_box .info_list {
width: 100%;
font-size: 30rpx;
color: #4D4D4D;
margin-top: 10rpx;
}
.info_list image {
width: 100%;
... ...
// pages/caseList/caseList.js
const app=getApp();
Page({
/**
... ... @@ -8,19 +9,50 @@ Page({
connectButton: [
{ className: "", text: "在线客服", bindtap: "" }
],
caseList: [],
page: 1,
typeId: null,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: options.html,
let that = this;
wx.setNavigationBarTitle({
title: options.html,
});
that.setData({
typeId: options.id
})
that.getData();
},
getData() {
let that = this;
let url = '/portal/Api/listCategory';
console.log(that.data.page);
console.log(that.data.typeId);
let data = {
typeId: that.data.typeId,
page: that.data.page,
};
app.post(url, data).then((res) => {
console.log('res',res);
let data = [];
// data.
that.setData({
caseList: that.data.caseList.concat(res.list)
})
}).catch((err) => {
console.log(err);
})
},
jumpFun(e) {
// console.log(e.currentTarget.dataset.id);
wx.navigateTo({
url: '../caseDetail/caseDetail'
url: '../caseDetail/caseDetail?id=' + e.currentTarget.dataset.id
})
},
... ... @@ -63,7 +95,11 @@ Page({
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
that.setData({
page: that.data.page + 1
})
that.getData();
},
/**
... ...
<!--pages/caseList/caseList.wxml-->
<view class='case_list_wrap'>
<view class='case_list_box'>
<view class='case_list'>
<view class='case_list' wx:for="{{caseList}}" wx:key='index'>
<view class='case_top'>
<view class='case_title' bindtap='jumpFun'>某政府科技金融中心</view>
<view class='case_title' bindtap='jumpFun' data-id="{{item.id}}">{{item.title}}</view>
<view class='case_lable_box'>
<view class='case_lable_list'>政府</view>
<view class='case_lable_list'>工作效率</view>
<view class='case_lable_list'>业务分析</view>
<view class='case_lable_list'>快速报表</view>
<view class='case_lable_list' wx:for="{{item.label}}" wx:key='index'>{{item.name}}</view>
</view>
</view>
<view class='case_list_content'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/case_list.png'></image>
<video wx:if="item.video_type == true" src='{{item.video}}'></video>
<image wx:else src='http://pjq0ww1cj.bkt.clouddn.com/case_list.png'></image>
</view>
<view class='case_bottom_list'>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
</view>
</view>
<view class='case_list'>
<view class='case_top'>
<view class='case_title' bindtap='jumpFun'>某政府科技金融中心</view>
<view class='case_lable_box'>
<view class='case_lable_list'>政府</view>
<view class='case_lable_list'>工作效率</view>
<view class='case_lable_list'>业务分析</view>
<view class='case_lable_list'>快速报表</view>
</view>
</view>
<view class='case_list_content'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/case_list.png'></image>
</view>
<view class='case_bottom_list'>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
</view>
</view>
<view class='case_list'>
<view class='case_top'>
<view class='case_title' bindtap='jumpFun'>某政府科技金融中心</view>
<view class='case_lable_box'>
<view class='case_lable_list'>政府</view>
<view class='case_lable_list'>工作效率</view>
<view class='case_lable_list'>业务分析</view>
<view class='case_lable_list'>快速报表</view>
</view>
</view>
<view class='case_list_content'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/case_list.png'></image>
</view>
<view class='case_bottom_list'>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
</view>
<view class='case_bottom_banner'>
<image mode='widthFix' src='http://pjq0ww1cj.bkt.clouddn.com/case_bottom_list01.png'></image>
<view class='case_bottom_banner' wx:for="{{item.image}}" wx:key='index'>
<image mode='widthFix' src='{{item.url}}'></image>
</view>
</view>
</view>
... ...
/* pages/caseList/caseList.wxss */
.case_list_wrap {
width: 100%;
/* height: 100%; */
min-height: 100%;
background: #F0EFED;
}
.case_list_box {
... ... @@ -51,11 +51,16 @@
width: 100%;
height: 100%;
}
.case_list_content video {
width: 100%;
height: 100%;
}
.case_bottom_list {
height: 206rpx;
padding: 10rpx 0 50rpx 10rpx;
display: flex;
overflow-x: scroll;
overflow-y:hidden;
box-sizing: border-box;
}
.case_bottom_banner {
... ...
//index.js
//获取应用实例
const app = getApp()
var touchDot = 0;//触摸时的原点
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理时间记录
Page({
data: {
... ... @@ -21,6 +23,39 @@ Page({
app.slideupshow(this, 'slide_up1', 0, 1);
app.sliderightshow(this, 'slide_up2', 0, 1);
},
// 触摸开始事件
touchStart: function (e) {
touchDot = e.touches[0].pageX; // 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function () {
time++;
}, 100);
},
// 触摸移动事件
touchMove: function (e) {
var touchMove = e.touches[0].pageX;
console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
// 向左滑动
console.log(time)
if (touchMove - touchDot <= -40 && time < 10) {
wx.navigateTo({
url: '../case/case'
});
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10) {
console.log('向右滑动');
// alert("已经是第一页了")
// wx.switchTab({
// // url: '../case/case'
// });
}
},
// 触摸结束事件
touchEnd: function (e) {
clearInterval(interval); // 清除setInterval
time = 0;
},
getUserInfo: function (e) {
},
... ... @@ -30,12 +65,16 @@ Page({
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
wx.navigateTo({
url: '../case/case'
})
},
... ...
<!--index.wxml-->
<view class="container">
<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
<view class='imgPolytope'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/shouye.png'></image>
</view>
... ... @@ -8,7 +8,7 @@
<view class='content contentInit' animation="{{slide_up2}}">大数据探索商业价值的无限可能</view>
</view>
<view class='drop_img' bindtap="tapName">
<image src='http://pjq0ww1cj.bkt.clouddn.com/drop.png'></image>
<image src='http://pjq0ww1cj.bkt.clouddn.com/right.png'></image>
</view>
</view>
... ...