垃圾分類特別火也不知道北京何時也開始執行，看見以前上海市民被靈魂拷問了之後垃圾真的不知道如何丟了，做爲程序員就作一個小程序造福人類吧。程序員
效果圖：json
1、全局的app.json和app.wxss加入了一點東西小程序
App.jsonapi
{
"pages": [
"pages/index/index",
"pages/details/details",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
},
"sitemapLocation": "sitemap.json"
}
App.wxssapp
.bg{
position: absolute;
left:0;
top:0;
width:100%;
height: 100%;
}
2、下面就是首頁的index.wxml、index.js、 index.wxssxss
index.wxmlide
<image class='bg' src='../img/bg.png'></image>
<view class='container'>
<view class='top'>
<text class='top-title'>你是什麼垃圾</text>
<text class='top-more'>一鍵查詢免煩惱，從我作起愛環保</text>
</view>
<view class='search'>
<view class='search-main'>
<icon type='search' size='16'></icon>
<input
placeholder="請輸入查詢的垃圾名稱"
bindinput='iptDetails'
bindconfirm="search"
></input>
</view>
<view class='search-end' wx:if='{{searchResultDatas.length > 0}}'>
<text
wx:for='{{searchResultDatas}}'
wx:key='{{index}}'
bindtap='toDetails'
data-title='{{item.itemName}}'
>{{item.itemName}}</text>
</view>
</view>
<view class='hot'>
<view class='hot-main'>
<view class='hot-title'>熱門搜索：</view>
<view class='hot-item'>
<text
wx:for='{{hotSearch}}'
wx:key='{{index}}'
bindtap='toDetails'
data-title='{{item.itemName}}'
>{{item.itemName}}</text>
</view>
</view>
</view>
</view>
index.js函數
Page({
/**
* 頁面的初始數據
*/
data: {
hotSearch:[],
searchResultDatas:[]
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
let That = this;
wx.request({
url: 'http://apis.juhe.cn/rubbish/hotSearch',
data:{
key: 'ae200d60495f41dfb86da332dc059214',
},
success(res){
That.setData({
hotSearch: res.data.result
})
}
})
},
toDetails(e){
let title = e.currentTarget.dataset.title;
wx.navigateTo({
url: `../details/details?id=${title}`
})
},
iptDetails(e){
let That = this;
let val = e.detail.value;
if(val.length == 0){
this.setData({
searchResultDatas: []
})
return;
}
wx.request({
url: 'http://apis.juhe.cn/rubbish/search',
data:{
key:"ae200d60495f41dfb86da332dc059214",
q: val
},
success(res){
That.setData({
searchResultDatas: res.data.result
})
}
})
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動做
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxssflex
.container{
position: relative;
left:0;
top:88rpx;
}
.search-end{
display: flex;
overflow-y:auto;
background: #fff;
width:100%;
height: 750rpx;
position: fixed;
left:0rpx;
bottom:0rpx;
z-index:999;
flex-direction: column;
padding:30rpx;
}
.search-end text{
padding:20rpx 0 ;
border-bottom:1px solid #f5f5f5;
font-size:12px;
color:#ccc;
}
.top{
display: flex;
align-items: center;
flex-direction: column;
padding-top:150rpx;
color:#fff;
}
.top-title{
font-size:36px;
font-weight: bold;
}
.top-more{
font-size:12px;
}
.search{
padding-top:40rpx;
display: flex;
justify-content: center;
}
.search-main{
display: flex;
align-items: center;
background: #fff;
height:80rpx;
width:90%;
border-radius: 10rpx;
}
.search-main icon{
width:80rpx;
text-align: center;
}
.search-main input{
flex:1;
font-size:12px;
}
.hot{
padding-top:40rpx;
display: flex;
justify-content: center;
}
.hot-main{
width:90%;
color:#fff;
}
.hot-title{
padding:20rpx 0;
}
.hot-item{
display: flex;
flex-wrap: wrap;
}
.hot text{
border-radius: 30rpx;
border:1px solid #fff;
padding:5rpx 30rpx;
margin: 20rpx 20rpx 20rpx 0;
font-size:12px;
}
3、下面就是詳情頁details.wxml、details.js、details.wxssthis
details.wxml
<image class='bg' src='../img/bg.png'></image>
<view class='details'>
<view class="end">
<text class='name'>{{item.itemName}}</text>
<text class='attr'>屬性「{{item.itemCategory}}」</text>
</view>
<view class='details-more'>
<view class='more-title'>
{{item.itemCategory}}投放指導
</view>
<view class='more-title'>
<text>·儘可能瀝乾水分</text>
<text>·難以辨別的生活垃圾應投入垃圾容器內</text>
<text>·餐巾紙、紙巾、紙尿褲等其餘垃圾</text>
</view>
</view>
<button bindtap='toHome'>關閉</button>
</view>
details.js
// pages/details/details.js
Page({
/**
* 頁面的初始數據
*/
data: {
item:[]
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
let itemName = options.id;
let That = this;
wx.request({
url: 'http://apis.juhe.cn/rubbish/search',
data:{
key: 'ae200d60495f41dfb86da332dc059214',
q: itemName,
type:2
},
success(res){
That.setData({
item: res.data.result[0]
})
}
})
},
toHome(){
// wx.navigateTo({
// url: '../index/index',
// })
wx.navigateBack()
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動做
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxss
.details{
position: relative;
top:44px;
left:0;
}
.end{
padding-top:120rpx;
padding-bottom:100rpx;
color:#fff;
display: flex;
flex-direction: column;
align-items: center;
}
.end text{
padding:5rpx 0;
}
.name{
font-size:21px;
}
.attr{
font-size:36px;
font-weight: bold;
}
.details-more{
width:90%;
margin:0 auto;
background: #fff;
border-radius: 20rpx;
padding:20rpx;
}
.more-title{
padding:10rpx;
font-size:16px;
}
.more-title text{
padding:20rpx;
font-size:12px;
display: block;
}
button{
margin-top:100rpx;
background: #fff;
color:#0190ff;
border:none;
width:300rpx;
height: 80rpx;
border-radius: 50rpx;
font-size:14px;
text-align: center;
line-height: 80rpx;
}