2020-09-28
微信小程序模仿微信主页及页面跳转详解
主页wxml代码：
<view class="box {{currentindex===index?'hoverstyle':''}}" wx:for="{{data}}" bindtouchstart="startClick" bindtouchend="endClick" data-index="{{index}}">
<view class="box1" catchtap="imageClick">
<!-- <checkbox checked="{{item.isChecked}}"></checkbox> -->
<image src="http://116.62.201.243:8080/wxxcx/{{item.image}}" data-key="{{item.goodsId}}" bindtap="clickHandler"></image>
<view class="num" wx:if="{{item.price>99}}">99+</view>
<view class="num" wx:else>{{item.price}}</view>
</view>
<view class="box2">
<view class="box3">
<view class="title">{{item.detail}}</view>
<view class="time">{{item.upTime}}</view>
</view>
<view class="text">
{{item.name}}
</view>
</view>
</view>
主页wxss代码：
.hoverstyle{
background-color: khaki;
}
.age{color: blueviolet;}
.course{
color: coral;font-weight: bolder;
}
/* image{
width: 100vw;
height: 100vh;
} */
.box{
margin-left: 10px;
display: flex;
flex-direction: row;
/* background-color: darkorange; */
height: 180rpx;
width: 100%;}
.box image{
border-radius: 10%;
width: 120rpx;
height: 130rpx;
margin-top: 10rpx;
}
.box1{
/* background-color: darkorchid; */
position: relative;
/* background-color: cornsilk; */
}
.box2 {width: 590rpx;
margin-left: 10px;
/* background-color: forestgreen; */
display: flex;
flex-direction: column;
border-width: 0 0 1px 0;
border-color: darkgray;
border-style: solid;
}
.text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.box3{
width: 570rpx;
margin-top: 15rpx;
display: flex;
/* background-color: firebrick; */
justify-content: space-between;
flex-direction: row;
}
.title{
font-size: 40rpx;
/* background-color: crimson; */
left: 0;
}
.time{
color: darkgray;
/* background-color: cyan; */
width: 1ss00rpx;
right: 10px;
}
.text{width: 450rpx;
margin-top: 4px;
font-size: 35rpx;
color: darkgray;
}
.num{
width: 45rpx;
height:45rpx;
background-color: crimson;
border-radius: 50%;
text-align: center;
display: flex;
justify-content: center;
position: absolute;
top: 0;
right: 0;
}
主页js代码：
var currentPage = 1;
var currentindex = -1;
var isAllChecked = false;
var count = 60;
var id = 0 ;
Page({
clickHandler: function (e) {
console.log(e);
console.log(e.currentTarget.dataset.key);
console.log('clickHandler-----');
var id = e.currentTarget.dataset.key;
wx.navigateTo({
url: '../user/regist/regist?id=' + id,
})
},
startClick: function (event) {
console.log(event)
currentindex = event.currentTarget.dataset.index
this.setData({
currentindex: currentindex
})
},
endClick: function () {
this.setData({
currentindex: -1
})
},
allCheck: function () {
isAllChecked = !isAllChecked
var list = this.data.wx.sy;
if (isAllChecked) {
for(var i=0;i<list.length;i++){
var item=list[i];
item.isChecked=true;
list.slice(i,1,item)
}
}
this.setData({
isAllChecked: isAllChecked,
"wx:sy":list
})
},
click: function () {
var id = setInterval(() => {
var percent = this.data.percent;
percent++;
this.setData({
percent: percent
})
if (percent > 50) {
clearInterval(id)
}
}, 1000)
},
sendclick: function () {
if (count!=60) {
return
}
id = setInterval(() => {
count--
this.setData({
count: count + 's'
})
if (count===0) {
clearInterval(id)
count=60;
this.setData({
count: "发送"
})
}
}, 1000)
},
onHide: function () {
if (id=0) {
return
}
clearInterval(id)
},
onShow: function () {
id = setInterval(() => {
var percent = this.data.percent;
percent++;
this.setData({
percent: percent
})
if (percent > 50) {
clearInterval(id)
}
}, 1000)
},
/**
* 页面的初始数据
*/
data: {
count: "发送",
percent: 0,
name: 'aaaa',
num: {
a: "3",
b: "2",
c: "4",
d: "6"
},
classname: {
banji: "一年一班",
students: [{
name: '张三',
age: 20,
course: [
"语文", "数学", "英语"
]
},
{
name: '李四',
age: 19,
course: [
"语文", "数学", "英语"
]
},
{
name: '王五',
age: 21,
course: [
"语文", "数学", "英语"
]
}
]
},
wx: {
sy: [
]
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// var list = [];
// for (let i = 0; i < 10; i++) {
// var obj = {
// id: i,
// img: "../img/wxq.jpg",
// num: i * 3,
// title: "王雪棋" + i + 1,
// content: "菲菲我放学去食堂",
// time: "9:00",
// }
// list.push(obj)
// }
// this.loadData();
// console.log(list)
// this.setData({"wx.sy":list})
wx.request({
url: 'http://116.62.201.243:8080/wxxcx/goods/getGoodsByPage',
method: "POST",
data: {
page: 1,
pageSize: 8
},
success: (res) => {
console.log(res.data.data)
this.setData({
data: res.data.data
})
}
})
},
onReachBottom: function () {
// var prePage = currentPage;
// currentPage++;
// var list=this.data.wx.sy
// var list=[];
// for (let i = (prePage*10); i < (currentPage*10); i++) {
// var obj = {
// id: i,
// img: "../img/wxq.jpg",
// num: i * 3,
// title: "王雪琪" + (i+1),
// content: "菲菲我放学去食堂",
// time: "9:00",
// }
// list.push(obj)
// }
// console.log(list)
// this.setData({"wx.sy":list})
this.loadData();
},
onPullDownRefresh: function () {
currentPage = 1;
},
loadData:function(){
var prePage = currentPage;
currentPage++;
wx.request({
url: 'http://116.62.201.243:8080/wxxcx/goods/getGoodsByPage',
method:"POST",
data:{
page:2,
pageSize:8
},
success:(res)=>{
var data=this.data.data
console.log(data)
// console.log(res)
var data1=res.data.data
for(var i=0;i<data1.length;i++){
data.push(data[i])
}
console.log(data1)
this.setData({
data:data
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
/**
* 生命周期函数--监听页面隐藏
*/
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
/**
* 页面上拉触底事件的处理函数
*/
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
app.js代码（用于点击头像跳转详情）：
globalData: {
userInfo: null,
host:"http://116.62.201.243:8080/wxxcx/"
}
,
studentDetails:[{
gender:"male",
id:2,
img:"../../img/1.jpg",
name:"星卡助手",
wechatName:"星卡助手",
wechatnumber:"meteorcard",
address:"中国",
lable:"公众号",
circle:[
"../../img/1.jpg","../../img/2.png","../../img/3.jpg"
]
},
{
gender:"male",
id:1,
img:"../../img/1.jpg",
wechatName:"大学城颜值巅峰",
wechatnumber:"123456",
address:"中国",
lable:"班级群",
circle:[
"../../img/1.jpg","../../img/2.png","../../img/3.jpg"
]
}
]
