微信小程序项目-你是什么垃圾？
发布时间：2020-12-14 19:09:13 所属栏目：资源 来源：网络整理
导读：垃圾分类特别火也不知道北京什么时候也开始执行，看见之前上海市民被灵魂拷问了以后垃圾真的不知道如何丢了，作为程序员就做一个小程序造福人类吧。 效果图： 一、全局的app.json和app.wxss加入了一点东西 App.json { "pages" : [ "pages/index/index" , "pa
|
垃圾分类特别火也不知道北京什么时候也开始执行，看见之前上海市民被灵魂拷问了以后垃圾真的不知道如何丢了，作为程序员就做一个小程序造福人类吧。 效果图：
一、全局的app.json和app.wxss加入了一点东西 App.json {
"pages": [
"pages/index/index","pages/details/details",0);">"pages/logs/logs"
],"window": {
"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "white","navigationStyle": "custom"
},"sitemapLocation": "sitemap.json"
}
App.wxss .bg{
position: absolute;
left:0;
top:width:100%;
height: 100%;
}
二、下面就是首页的index.wxml、index.js、 index.wxss index.wxml <image class='bg' src='../img/bg.png'></image>
<view class='container'>
<'top'>
<text class='top-title'>你是什么垃圾</text>
<'top-more'>一键查询免烦恼，从我做起爱环保</text>
</view>
<'search'>
<'search-main'>
<icon type='search' size='16'></icon>
<input
placeholder="请输入查询的垃圾名称"
bindinput='iptDetails'
bindconfirm="search"
></input>
</view>
<'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>
<'hot'>
<'hot-main'>
<'hot-title'>热门搜索：</view>
<'hot-item'>
<text
wx:for={{hotSearch}}'
wx:key=}'
bindtap='toDetails'
data-title=}'
>text>
</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){
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
})
}
})
},136);">/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},136);">/**
* 生命周期函数--监听页面显示
*/
onShow: /**
* 生命周期函数--监听页面隐藏
*/
onHide: /**
* 生命周期函数--监听页面卸载
*/
onUnload: /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: /**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxss 三、下面就是详情页details.wxml、details.js、details.wxss
|
