<view class="tab">
<view class="tab-right">
<view class="right-item" wx:for="{{list}}" data-id="{{item.id}}" bindtap="gotopro">
<image class="ig" src="{{item.photo}}"></image>
<view class="boxx">
<view class="ming">{{item.name}}</view>
<view class="digest" wx:if="{{item.digest}}">{{item.digest}}...</view>
</view>
</view>
<view class="clear mt10" bindtap="getMore" wx:if="{{list}}">点击查看更多</view>
</view>
</view>
|
.tab{
flex-direction: row;
width: 100%;
}
.tab-left{
width:100%;
line-height: 160%;
font-size: 34rpx;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
}
.tab-left view{
text-align: center;
display:inline-block;
width: 50%;
height: 38px;
line-height: 38px;
font-family: "微软雅黑", "黑体";
}
.tab-left .active{
color: white;
background: #78909c;
}
.tab-right{
line-height: 160%;
}
.tab-right .right-item{
padding: 30rpx 20rpx;
height: 100rpx;
border-bottom: 1px solid #ccc
}
.tab-right .right-item.active{
display: block;
}
.ig{
width:100rpx;
height:100rpx;
float: left
}
.boxx{
display: inline-block;
width:70%;
padding-left: 20rpx;
margin-top:-10rpx;
}
.cheng{
font-family: "微软雅黑", "黑体";
font-size: 28rpx;
color: #666666;
margin-top:20rpx;
}
.moreButton {
margin-top: 20rpx;
width: 100%;
height: 40rpx;
text-align: center;
/*line-height: 80rpx;*/
font-size: 28rpx;
/*color: #ccc;*/
}
.mt10{
margin: 0 auto;
text-align: center;
height: 70rpx;
width: 450rpx;
line-height: 70rpx;
border-radius:10rpx;
border: 1px solid #999;
font-size: 30rpx;
margin-top: 20rpx;
margin-bottom: 30rpx;
}
/*品牌字体*/
.ming{
font-family: "微软雅黑", "黑体";
font-weight: 700;
font-size:28rpx;
}
.digest{
color: #666666;
font-size: 24rpx;
margin-top: -10rpx;
font-family: "微软雅黑", "黑体";
line-height:30rpx;
}
|
// pages/brand/brand.js
var app=getApp();
Page({
/**
* 页面的初始数据
*/
data: {
page:2
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
wx.request({
url: app.d.ceshiUrl + '/Api/Category/brand',
method: 'post',
data: {
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// //--init data
var data = res.data;
if (data.status == 1) {
that.setData({
list:res.data.list
})
} else {
wx.showToast({
title: data.err,
duration: 2000
});
}
},
fail: function () {
// fail
wx.showToast({
title: '网络异常！',
duration: 30000
});
}
});
},
getMore: function (options) {
var that = this;
wx.request({
url: app.d.ceshiUrl + '/Api/Category/brand',
method: 'post',
data: {
page:that.data.page
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// //--init data
var data=res.data;
var list = res.data.list;
if (data.status == 1) {
that.setData({
list: res.data.list.concat(list)
})
} else {
wx.showToast({
title: data.err,
duration: 2000
});
}
},
fail: function () {
// fail
wx.showToast({
title: '网络异常！',
duration: 30000
});
}
});
},
gotopro:function (e){
var brand_id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../listdetail/listdetail?brand_id=' + brand_id
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
模板简介：该模板名称为【微信小程序各著名电梯品牌列表展示样式设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
