From 545aaa8de1304d47133835052f60eadf159fd254 Mon Sep 17 00:00:00 2001 From: DESKTOP-QHAFKU5\iceling Date: Tue, 10 Dec 2019 15:25:45 +0800 Subject: [PATCH] 标签页排版 --- pages/user/labels/labels.js | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ pages/user/labels/labels.json | 3 +++ pages/user/labels/labels.wxml | 43 +++++++++++++++++++++++++++++++++++++++++++ pages/user/labels/labels.wxss | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 240 insertions(+), 0 deletions(-) create mode 100644 pages/user/labels/labels.js create mode 100644 pages/user/labels/labels.json create mode 100644 pages/user/labels/labels.wxml create mode 100644 pages/user/labels/labels.wxss diff --git a/pages/user/labels/labels.js b/pages/user/labels/labels.js new file mode 100644 index 0000000..d4ce336 --- /dev/null +++ b/pages/user/labels/labels.js @@ -0,0 +1,116 @@ +// pages/user/labels/labels.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + interest_lables: [{ + lable: "学生" + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生" + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }, { + lable: "学生", + check: 0 + }], //兴趣标签 + check_label: [], //用户选中的标签集合 + }, + //点击选择兴趣标签把值放到已选中 + click_label: function(e) { + var th = this; + var index = e.currentTarget.dataset.index; //选择兴趣标签的下标 + var labels = th.data.interest_lables; //兴趣标签数组 + var check_label = th.data.check_label; //已选中的数组 + var labels_cid = th.data.interest_lables[index].check; //当前标签是否选中 + var labels_check = 'interest_lables[' + index + '].check'; //用于点击标签把点击状态赋值进去 + if (labels_cid) { + labels_cid = 0; + + } else { + labels_cid = 1; + } + //循环看哪些标签选中 + for (var i = 0; i < labels.length; i++) { + if (labels[i].check) { + check_label.push(labels[i].lable); + } + } + th.setData({ + [labels_check]: labels_cid, + check_label: check_label + }) + + }, + // var th = this; + // var evaluate = th.data.is_evaluate; //0为未评价，未评价才可点击标签 + // if(evaluate == 0) { + // var index = e.currentTarget.dataset.index; + // var label_id = th.data.labels[index].check; + // var labels = 'labels[' + index + '].check'; + // if (label_id) { + // label_id = 0 + // } else { + // label_id = 1 + // } + // th.setData({ + // [labels]: label_id + // }) + // } + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function(options) { + + }, + + /** + * 生命周期函数--监听页面显示 + */ + onShow: function() { + + }, + + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom: function() { + + } +}) \ No newline at end of file diff --git a/pages/user/labels/labels.json b/pages/user/labels/labels.json new file mode 100644 index 0000000..d7ee41c --- /dev/null +++ b/pages/user/labels/labels.json @@ -0,0 +1,3 @@ +{ + "navigationBarTitleText": "兴趣标签" +} \ No newline at end of file diff --git a/pages/user/labels/labels.wxml b/pages/user/labels/labels.wxml new file mode 100644 index 0000000..2cf070e --- /dev/null +++ b/pages/user/labels/labels.wxml @@ -0,0 +1,43 @@ + + + + + + 兴趣标签 + + 跳过 + + + + + + + + {{item.lable}} + + + + + + + + 已选中 + + + + {{it}} + + + + + + + + + 领取200成长值 + + + + + + \ No newline at end of file diff --git a/pages/user/labels/labels.wxss b/pages/user/labels/labels.wxss new file mode 100644 index 0000000..7a284c7 --- /dev/null +++ b/pages/user/labels/labels.wxss @@ -0,0 +1,78 @@ +.padding { + padding: 0rpx 65rpx; +} + +.container { + border-top: 6rpx solid rgb(238, 238, 238); +} + +.labels_head { + padding-top: 60rpx; + padding-bottom: 25rpx; + border-bottom: 3rpx solid rgb(238, 238, 238); +} + +.skip { + width: 100rpx; + height: 40rpx; + line-height: 45rpx; + border: 2rpx solid rgb(155, 155, 155); + border-radius: 30rpx; + color: rgb(153, 153, 153); +} + +.label_aggregate { + height: 520rpx; + padding-top: 30rpx; + overflow-y: scroll; +} + +.label { + display: inline-block; + max-width: 200rpx; + height: 46rpx; + border: 2rpx solid rgb(204, 204, 204); + border-radius: 30rpx; + line-height: 46rpx; + padding: 0rpx 30rpx; + margin-right: 25rpx; + margin-bottom: 45rpx; +} +.click{ + border: 2rpx solid rgb(255, 138, 160); + background-color: rgb(255, 138, 160); +} +.check_head { + padding-top: 50rpx; + padding-bottom: 25rpx; + border-bottom: 3rpx solid rgb(238, 238, 238); + margin-bottom: 30rpx; +} + +.check_label { + display: inline-block; + max-width: 200rpx; + height: 46rpx; + border: 2rpx solid rgb(255, 138, 160); + line-height: 46rpx; + margin-right: 25rpx; + margin-bottom: 45rpx; + padding: 0rpx 30rpx; + border-radius: 30rpx; + color: rgb(255, 255, 255); + background-color: rgb(255, 138, 160); +} +.receive{ + position: fixed; + bottom:100rpx; + width: 620rpx; + height: 70rpx; + line-height: 70rpx; + background-color: rgb(255, 138, 160); + color: rgb(255, 255, 255); + border-radius: 40rpx; +} +.check_labels{ + height: 300rpx; + overflow-y: scroll; +} \ No newline at end of file -- libgit2 0.21.4