本文给大家带来的是微信小程序线下体验店信息展示列表页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="ws_lineList" wx:if="{{shopList.length > 0}}">
<view class="ws_listBox" wx:for="{{shopList}}">
<image src="http://m.youzhu.com{{item.pcImg}}"/>
<view class="ws_listInfo">
<text class="h2">{{item.name}}</text>
<text class="p">{{item.address}}</text>
<navigator hover-class="none" url="/pages/lineshop/lineshop?id={{item.id}}">查看详情</navigator>
</view>
</view>
</view>
<view class="listNone" wx:if="{{shopList.length == 0}}">
<text>您当前的城市未开通线下体验店</text>
<button bindtap="getAll">查看全部体验店</button>
</view>
|
二、wxss样式文件代码如下：
.ws_listBox{height: 360rpx;margin-bottom: 20rpx;position:relative;background:rgba(51,42,20,0.55);overflow: hidden;}
.ws_listBox image{display: block;width: 100%;min-height: 100%;position:absolute;left: 0;top: 0;z-index:-1;}
.ws_listInfo{float: right;margin-right: 70rpx;text-align: right;width: 366rpx;}
.ws_listInfo text.h2{display:block;padding-top: 50rpx;line-height: 88rpx;font-size:34rpx;color:#fff;}
.ws_listInfo text.p{display:block;font-size:28rpx;color:#fff;line-height: 34rpx;}
.ws_listInfo navigator{float: right;display: block;margin-top: 28rpx;background:rgba(255,255,255,0.13); border:1rpx solid rgba(255,255,255,0.24); border-radius:8rpx; width:146rpx; height:56rpx;font-size:28rpx;color:#fff;text-align: center;line-height: 56rpx;}
.listNone text{font-size:30rpx;color:#aaaaaa;text-align: center;margin-top: 300rpx;line-height: 30rpx;text-align: center;display: block;}
.listNone button{background:#ffb922; border:1rpx solid #ffa222; border-radius:8rpx; width:316rpx; height:72rpx;font-size:28rpx;color:#fff;line-height: 72rpx;text-align: center;margin: auto;margin-top: 120rpx;display: block;}
.listNone button::after{border: 0;}
|
三、js页面代码如下：
var app = getApp()
Page({
data: {
shopList: {},
locationCity: ''
},
loadBanner: function () {
var _this = this;
wx.request({
url: 'https://m.youzhu.com/centershop/CenterShopList',
header: { 'content-type': 'application/x-www-form-urlencoded' },
method: 'post',
data: { city: _this.data.locationCity ? _this.data.locationCity : '全国' },
success: function (res) {
wx.hideLoading()
wx.stopPullDownRefresh()
if (res.data.errorNo >= 0) {
_this.setData({
shopList: res.data.data
})
}
}
})
},
getAll:function(){
this.setData({
locationCity: '全国'
})
wx.showLoading({ title: '加载中', mask: true })
this.loadBanner()
},
onPullDownRefresh: function () {
this.loadBanner();
},
onLoad: function () {
this.setData({
locationCity: wx.getStorageSync('locationCity')
})
wx.showLoading({ title: '加载中', mask: true })
this.loadBanner()
}
})
|
.jpg)
.jpg)
