<!--index.wxml-->
<scroll-view class="container" scroll-y="true" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" bindscroll="scroll">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-box" id="top">
<block wx:for-items="{{banner_list[0].banner}}" wx:key="index">
<swiper-item >
<image class="slide-image" src="{{item.pic_url}}"/>
</swiper-item>
</block>
</swiper>
<view>
<view class='menueview' >
<block wx:for-items="{{banner_list[1].banner}}" wx:key="index">
<view class="menue-1">
<view class="menueimg">
<image src="{{item.pic_url}}" class="menue-image" />
</view>
<view class="menuetext">{{item.title}}</view>
</view>
</block>
</view>
</view>
<view class='hg-container' id="new" >
<text class="hg-title">新品推荐</text>
<view class='gooditem'>
<view class='imgview' wx:key="index" wx:for="{{newgoods}}" wx:for-index="idx" wx:for-item="good">
<image class='productimg' src='{{good.hg_pic}}'/>
</view>
</view>
</view>
<view class='hg-container'>
<text class="hg-title">超值买</text>
<view class='gooditem'>
<view class='imgview' wx:key="index" wx:for="{{newgoods}}" wx:for-index="idx" wx:for-item="good">
<image class='productimg' src='{{good.hg_pic}}'/>
</view>
</view>
</view>
<view class='hot-container'>
<view class="hot-title">食惠购</view>
<view class='hot-gooditem'>
<view class='hot-imgview' wx:key="index" wx:for="{{hotgoods}}" wx:for-index="idx" wx:for-item="hot">
<image class='hot-product' src='{{hot.more_pic}}'/>
</view>
</view>
</view>
<view class="footer" bindtap="tap">
<view>
<text>沪ICP备888888888号</text>
<text>htmlk.cn</text>
<text>微信商城有限公司</text>
<text>北京市xxxxxxxxx</text>
</view>
</view>
</scroll-view>
|
/**index.wxss**/
page{
height: 100%;
}
/*导航*/
.swiper-box {
height:375rpx;
}
.slide-image{
display: block;
height: 375rpx;
width:100%
}
/*四个菜单*/
.menueview{
display:flex;
background-color:#FFF;
padding: 5px 0;
border-bottom: 1px solid #eee;
}
.menue-1{
flex: 1;
}
.menueimg{
height: 60px;
width: 60px;
text-align: center;
margin: 0 auto
}
.menue-image{
height:45px;
width: 45px;
margin: 0 auto
}
.menuetext{
font-size: 12px;
color: #aaa;
text-align: center
}
/*hg-*/
.hg-container{
height:360rpx;
margin-top: 20px;
}
.gooditem{
width: 100%;
box-sizing: border-box;
display: flex;
}
.hg-title{
box-sizing: border-box;
padding: 10px;
font-size: 16px;
color: #008842;
}
.imgview{
flex: 1;
border: 1px solid #eee;
}
.imgview image{
width: 100%;
height: 300rpx;
}
.hot-container{
background: #eee;
}
.hot-title{
padding: 10px;
font-size: 16px;
color: #f55030;
background: #fff;
}
.hot-imgview{
margin-top: 10px;
}
.hot-imgview image{
width: 100%;
height: 280rpx;
}
/*footer*/
.footer{
text-align: center;
height: 200rpx;
}
.footer view{
width: 700rpx;
}
.footer text{
display:flex;
justify-content:center;
align-items:center;
color: #aaaaaa;
font-size: 12px;
}
|
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
toView: "",
motto: 'MiHome_Store',
userInfo: {},
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 100,
newgoods: [
{
"hg_pic": "http://img14.yiguoimg.com/e/ad/2016/160914/585749449477366062_260x320.jpg"
}, {
"hg_pic": "http://img09.yiguoimg.com/e/ad/2016/161011/585749449909281099_260x320.jpg"
}, {
"hg_pic": "http://img12.yiguoimg.com/e/ad/2016/160914/585749449480249646_260x320.jpg"
}
],
hotgoods: [],
banner_list: [
{
"banner": [
{
"pic_url": "http://img09.yiguoimg.com/e/ad/2016/160825/585749448986042649_800x400.jpg",
},
{
"pic_url": "http://img11.yiguoimg.com/e/ad/2016/160927/585749449690947899_800x400.jpg",
},
{
"pic_url": "http://img14.yiguoimg.com/e/ad/2016/160923/585749449636290871_800x400.jpg",
},
{
"pic_url": "http://img13.yiguoimg.com/e/ad/2016/160914/585749449480315182_800x400.jpg",
},
{
"pic_url": "http://img14.yiguoimg.com/e/ad/2016/161010/585749449889390922_800x400.jpg",
}
]
},
{
"banner": []
}
]
},
onPullDownRefresh: function () {
console.log('onPullDownRefresh')
},
scroll: function (e) {
if (this.data.toView == "top") {
this.setData({
toView: ""
})
}
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
tap: function () {
this.setData({
toView: "top"
})
},
onLoad: function () {
//调用应用实例的方法获取全局数据
var that = this;
//通过原生调取数据
wx.request({
url: 'https://wxapi.hotapp.cn/api/get',
data: {
appkey: 'hotapp25781921',
key: 'hot1'
},
method: "GET",
header: {
"content-type": "application/json"
},
success: function (a) {
console.log(a)
return "function" == typeof b && b(a.data)
},
fail: function (err) {
console.log(err)
return "function" == typeof b && b(!1)
}
})
//fecth调用
var fekchobj = {
R_GET: function (url, params) {
if (params) {
let paramsArray = []
Object.keys(params).forEach(key => paramsArray.push(key + '=' + encodeURIComponent(params[key])))
if (url.search(/?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
return new Promise(function (resolve, reject) {
fetch(url)
.then((response) => {
if (response.ok) {
return response.json()
} else {
reject('服务器繁忙，请稍后再试；rnCode:' + response.status)
}
})
.then((response) => {
if (response && response.status) {
resolve(response)//response.status 是与服务器端的约定，非0就是错误
} else {
reject(response)//response也是与服务器端的约定
}
})
.catch((err) => {
reject(_parseErrorMsg(err))
})
})
}
}
//监测错误
try{
}catch(e){
console.log(e)
}
console.log(fekchobj)
}
})
|
模板简介：该模板名称为【微信小程序水果电商首页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
