<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item bindtap="bannerUrl()">
<navigator hover-class="none" url="/pages/details/details?id={{item.activity}}&title={{item.title}}">
<image src="https://www.youzhu.com{{item.image}}" class="slide-image"/>
</navigator>
</swiper-item>
</block>
</swiper>
<view class="ws_menu">
<navigator hover-class="none" url="/pages/product/product"><image src="https://m.youzhu.com/images/weChatAppImages/icon_1.png" /><text>装修产品</text></navigator>
<navigator hover-class="none" url="/pages/design/design"><image src="https://m.youzhu.com/images/weChatAppImages/icon_2.png" /><text>定制设计</text></navigator>
<!-- <navigator hover-class="none" url="{{bannerList.designList.length == 1 ? '/pages/details/details?id=' + bannerList.designList[0].activity + '&title=' + bannerList.designList[0].title : '/pages/design/design'}}"><image src="https://m.youzhu.com/images/weChatAppImages/icon_2.png" /><text>定制设计</text></navigator> -->
<navigator hover-class="none" url="/pages/offer/offer"><image src="https://m.youzhu.com/images/weChatAppImages/icon_3.png" /><text>免费报价</text></navigator>
<navigator hover-class="none" url="{{bannerList.activityList.length == 1 ? '/pages/details/details?id=' + bannerList.activityList[0].activity + '&title=' + bannerList.activityList[0].title : '/pages/activity/activity'}}"><image src="https://m.youzhu.com/images/weChatAppImages/icon_4.png" /><text>当期活动</text></navigator>
<navigator hover-class="none" url="/pages/lineshoplist/lineshoplist"><image src="https://m.youzhu.com/images/weChatAppImages/icon_5.png" /><text>线下门店</text></navigator>
<navigator hover-class="none" url="/pages/coupon/coupon"><image src="https://m.youzhu.com/images/weChatAppImages/icon_6.png" /><text>专属优惠</text></navigator>
</view>
<view class="ws_kf">
<button open-type="contact">联系客服</button>
</view>
|
/**index.wxss**/
.wx-swiper-dot{
display: inline-flex !important;
height: 17rpx !important;
width:17rpx !important;
border-radius:17rpx !important;
margin:0 6rpx !important;
vertical-align: sub !important;
border:0 !important;
}
.wx-swiper-dot::before{
content: '' !important;
background: #cbcbcb !important;
flex-grow: 1 !important;
border-radius:17rpx !important;
}
.wx-swiper-dot-active::before{
content: '' !important;
background:#53d55e !important;
flex-grow: 1 !important;
border-radius:17rpx !important;
}
swiper{height:360rpx;}
block{height:360rpx;}
.slide-image{width:750rpx;height:360rpx;}
page{padding-bottom: 110rpx;}
.ws_menu{overflow: hidden;text-align: center;line-height: 28rpx;padding: 10rpx;padding-right:0;padding-bottom: 0;}
.ws_menu navigator{display: block;float: left;width:358rpx;border:1rpx solid #E8E8E8;height:233rpx;background: #fff;margin-right: 10rpx;margin-bottom: 10rpx;}
.ws_menu navigator:nth-child(2n){margin-right: 0;}
.ws_menu image{margin: auto;margin-top: 30rpx;display: block;width: 135rpx;height: 140rpx;}
.ws_menu text{display: block;margin-top: 10rpx;font-size: 28rpx;color: #777;}
.ws_kf{background:#89ba2a;position:fixed;bottom: 0;left: 0;width: 100%;}
.ws_kf button{border-radius: none;display: block;width: 100%;height: 100rpx;line-height: 100rpx;font-size:30rpx;background:#89ba2a;color: #fff;}
button::after{border:0;}
|
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var app = getApp()
Page({
data: {
imgUrls: [],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 200,
bannerList:{
designList:[],
activityList:[],
discountList:[]
}
},
loadBanner: function () {
var _this = this;
wx.request({
url: 'https://www.youzhu.com/api/adimg/getimage?time=' + new Date(),
header: { 'content-type': 'application/x-www-form-urlencoded' },
data: { location: 1 },
method: 'post',
success: function (res) {
wx.hideLoading()
// wx.stopPullDownRefresh()
_this.setData({
imgUrls: res.data.data
})
}
})
// wx.request({
// url: 'https://www.youzhu.com/api/adimg/getimage?time=' + new Date(),
// header: { 'content-type': 'application/x-www-form-urlencoded' },
// method: 'post',
// data: { location:2 },
// success: function (res) {
// _this.setData({
// 'bannerList.designList': res.data.data
// })
// }
// })
wx.request({
url: 'https://www.youzhu.com/api/adimg/getimage?time=' + new Date(),
header: { 'content-type': 'application/x-www-form-urlencoded' },
method: 'post',
data: { location: 3 },
success: function (res) {
_this.setData({
'bannerList.activityList': res.data.data
})
}
})
wx.request({
url: 'https://www.youzhu.com/api/adimg/getimage?time=' + new Date(),
header: { 'content-type': 'application/x-www-form-urlencoded' },
method: 'post',
data: { location: 4 },
success: function (res) {
_this.setData({
'bannerList.discountList': res.data.data
})
}
})
},
onPullDownRefresh: function () {
// this.loadBanner();
},
onLoad: function () {
if (!wx.getStorageSync('locationCity')){
qqmapsdk = new QQMapWX({
key: 'UC3BZ-WENWG-75FQ7-IG5Z7-TVWX7-LHBXS'
});
wx.getLocation({
type: 'gcj02',
success: function (res) {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (res) {
wx.setStorageSync('locationCity', res.result.ad_info.city)
}
});
}
})
}
// if (!wx.getStorageSync('access_token') || (new Date().getTime() - wx.getStorageSync('getTokenDate')) > 7200000){
// wx.request({
// url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxf2b4831fe977f5f0&secret=6e089eb76ca3c3b74c64146baada17c3',
// success: function (e) {
// wx.setStorageSync('access_token', e.data.access_token)
// wx.setStorageSync('getTokenDate',new Date().getTime())
// }
// })
// }
wx.showLoading({ title: '加载中', mask: true })
this.loadBanner()
}
})
|
模板简介：该模板名称为【微信小程序有住网图文分类导航设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
