首页 > 小程序教程 > 微信小程序各著名电梯品牌列表展示样式设计制作开发教程

微信小程序各著名电梯品牌列表展示样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序各著名电梯品牌列表展示样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
.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;
}


三、js页面代码如下:
// 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 () {
  
  }
})

模板简介:该模板名称为【微信小程序各著名电梯品牌列表展示样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 18,581次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-02
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 单页式简历模板 响应式 微信模板 Bootstrap html5 微信文章 表格式简历模板 自适应 企业网站
您可能会喜欢的其他模板