/** 位置：pages/star/star.js
作者：宇天行 */
var util = require('../../utils/util.js')
Page({
data: {
select_me: false,
select_he: false,
grade_name_me: '选择你的星座',
grade_name_he: '选择对方星座',
grades_me: ['白羊', '金牛', '双子', '巨蟹', '狮子', '处女', '天秤', '天蝎', '射手', '魔羯', '水瓶', '双鱼'],//我的下拉列表的数据
grades_he: ['白羊', '金牛', '双子', '巨蟹', '狮子', '处女', '天秤', '天蝎', '射手', '魔羯', '水瓶', '双鱼'],//对象下拉列表的数据
index: 0,//选择的下拉列表下标
},
/* 点击下拉框 */
bindShowMsg_me() {
this.setData({
select_me: !this.data.select
})
},
bindShowMsg_he() {
this.setData({
select_he: !this.data.select
})
},
/* 已选下拉框 */
mySelect_me(e) {
var name = e.currentTarget.dataset.name
this.setData({
grade_name_me: name,
select_me: false
})
wx.setStorage({
key: 'xingzuo_me',
data: name
})
},
mySelect_he(e) {
var name = e.currentTarget.dataset.name
var xingzuo_me = wx.getStorageSync('xingzuo_me');
this.setData({
grade_name_he: name,
select_he: false
})
this.onLoad(name, xingzuo_me);
},
onLoad: function (me,he) {
var that = this
//转发分享
wx.showShareMenu({
withShareTicket: true
}),
wx.request({
url: util.TXAPI_BASE_URL + '/txapi/xingzuo/',
data: {
key: util.TXAPI_KEY,
me: me,
he: he
},
success: function (res) {
if(res.data.code == 200){
that.setData({
grade:res.data.newslist[0].grade,
content: res.data.newslist[0].content
})
}
},
fail: function (err) {
console.log(err)
}
})
}
})
/** 位置：pages/star/star.wxml
作者：宇天行 */
<view class="container">
<!-- 你的星座选择 -->
<view class="xingzuo">
<view class='top-selected' bindtap='bindShowMsg_me'>
<text>{{grade_name_me}}</text>
</view>
<!-- 对方星座选择 -->
<view class='top-selected-he' bindtap='bindShowMsg_he'>
<text>{{grade_name_he}}</text>
</view>
</view>
<!-- 下拉框显示列表 -->
<view class="select_box" wx:if="{{select_me}}">
<view wx:for="{{grades_me}}" wx:key="unique">
<view class="select_one" bindtap="mySelect_me" data-name="{{item}}">{{item}}</view>
</view>
</view>
<!-- 对象显示的列表 -->
<view class="select_box_he" wx:if="{{select_he}}">
<view wx:for="{{grades_he}}" wx:key="unique">
<view class="select_one" bindtap="mySelect_he" data-name="{{item}}">{{item}}</view>
</view>
</view>
<view class="neir">
<view class="grade">{{grade}}</view>
<view class="content">{{content}}</view>
</view>
</view>
/** 位置：pages/star/star.wxss
/** 作者：宇天行 */
page{
background: rgb(252, 251, 251);
font-size: 16px;
background:url("背景图片地址") no-repeat 0 0;
background-size: 100% auto;
}
/* 下拉框 */
.top-selected,.top-selected-he{
float: left;
border: 1rpx solid #fff;
padding: 6rpx 20rpx;
margin: 20rpx 6px;
font-size: 30rpx;
border-radius: 4px;
}
.top-selected-he{
float: right;
}
//* 下拉框内容 */
.select_box,.select_box_he {
background-color: #fff;
padding: 0 20rpx;
width: 20%;
float: left;
position: relative;
right: 0;
z-index: 1;
overflow: hidden;
text-align: left;
font-size: 30rpx;
}
.select_box_he {
float: right;
}
.select_one {
padding-left: 10rpx;
width: 100%;
height: 60rpx;
position: relative;
line-height: 60rpx;
}
.xingzuo{
margin-bottom: 0rpx;
}
.neir{
margin-top: 50rpx;
font-size: 24rpx;
padding: 50rpx 30rpx;
}
.grade{
font-size: 28rpx;
padding-bottom: 50rpx;
}效果如下：
