<!--index.wxml--> <view class="container"> <view> <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange"> <block wx:for="{{images}}"> <swiper-item> <image src="{{item.picurl}}" class="slide-image"/> </swiper-item> </block> </swiper> </view> <view class="text"> <view class="line_flag"></view> <text>主题馆</text> </view> <view class="venues_box"> <view class="venues_list"> <block wx:for="{{venuesItems}}"> <view class="venues_item"> <navigator url="../brand/index?id={{item.id}}"> <image src="{{item.smallpic}}"/> </navigator> </view> </block> </view> </view> <view class="text"> <view class="line_flag"></view> <text>环球精选</text> </view> <view class="choice_box"> <view class="choice_list"> <block wx:for="{{choiceItems}}"> <navigator url="../details/index?id={{item.id}}"> <view class="choice_item"> <image src="{{item.goodspics}}"/> <view class="title">{{item.title}}</view> </view> </navigator> </block> </view> </view> <loading hidden="{{loadingHidden}}"> 加载中... </loading> </view> |
.container { background-color: #F2f2f2; } .swiper_box { width: 100%; } swiper-item image { width: 100%; display: inline-block; overflow: hidden; } view.text { display: flex; align-items: center; position: relative; padding: 10px 10px 10px 12px; font-size: 15px; color: #656565; } view.text:before { position: absolute; display: block; content: ' '; left: -5px; width: 2px; height: 100%; background-color: #09bb07; } .line_flag { width: 3px; height: 100%; height: 15px; display: inline-block; background-color: #f9f027; } view.text text { margin-left: 10px; line-height: 18px; font-weight: bold; } .venues_box { padding: 0 10rpx; } .venues_item { display: inline-block; width: 49%; margin: 0 0.5%; } .venues_item image{ width: 100%; height: 90px; } .choice_box { padding: 0 10rpx; } .choice_box .choice_list .choice_item{ margin-bottom: 15px; } .choice_box .choice_list image { width: 100%; height: 200px; } .choice_box .choice_list .title { font-size: 12px; font-weight: bold; text-align: center; color: #333; } |
//获取应用实例 var app = getApp() Page({ data: { indicatorDots: true, vertical: false, autoplay: true, interval: 3000, duration: 1000, loadingHidden: false // loading }, //事件处理函数 swiperchange: function(e) { //console.log(e.detail.current) }, onLoad: function() { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo) { //更新数据 that.setData({ userInfo: userInfo }) }) //sliderList wx.request({ url: 'http://huanqiuxiaozhen.com/wemall/slider/list', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { that.setData({ images: res.data }) } }) //venuesList wx.request({ url: 'http://huanqiuxiaozhen.com/wemall/venues/venuesList', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { that.setData({ venuesItems: res.data.data }) setTimeout(function () { that.setData({ loadingHidden: true }) }, 1500) } }) //choiceList wx.request({ url: 'http://huanqiuxiaozhen.com/wemall/goods/choiceList', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function(res) { that.setData({ choiceItems: res.data.data.dataList }) setTimeout(function () { that.setData({ loadingHidden: true }) }, 1500) } }) } }) |
模板简介:该模板名称为【微信小程序环球小镇主题馆商品首页样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。