首页 > 小程序教程 > 微信小程序品牌电梯商铺信息页面样式设计制作开发教程

微信小程序品牌电梯商铺信息页面样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序品牌电梯商铺信息页面样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="shop" wx:for="{{shopList}}"  wx:key="id">
     <view class="fei">
        <image src="{{item.logo}}"></image>
     </view>
     <view class="gongsi">
       <view>{{item.name}}</view>
        <view class="bao" wx:if="{{item.shopmoney}}">
          <image class='bao_img' src="../../images/bao.png"></image>
          {{item.shopmoney}}
        </view>   
         <view> 联系人:{{item.uname}}</view> 
         <view> 电话:{{item.tel}}</view>   
         <view> 地址:{{item.sheng}} {{item.city}}</view>   
     </view>
     <view class="jinru" bindtap="stroe" data-id="{{item.id}}">
      <text>进入店铺</text>  
     </view>
<scroll-view scroll-x="true" class="sc" wx:if="{{item.pro_list.length>0}}">
 <view class="one" wx:for="{{item.pro_list}}" wx:for-item="pro" bindtap='jj' data-pid="{{pro.id}}"> 
    <image src="{{pro.photo_x}}"></image>
        <text class="yuan">¥ {{pro.price_yh}}</text>
 </view> 
</scroll-view>
</view>
<view class="clear mt10" bindtap="getMore" style="display:{{shopList==''?'none':'block'}}">点击查看更多</view>

<view class="lll">
    <image src="../../images/kf.png"> <contact-button></contact-button>  <contact-button></contact-button></image>
</view>
 
二、wxss样式文件代码如下:
/* pages/shop/shop.wxss */


.shop{
    background: white;
    margin-top: 20rpx;
    padding: 20rpx 10rpx;
}
.fei{
    width: 20%;
    display: inline-block;
    height: 180rpx;
    float: left
}
.fei image{
    width: 150rpx;
    height: 150rpx;
}
.gongsi{
    height: 180rpx;
    width: 56%;
    display: inline-block;
    font-size: 27rpx;
    line-height:40rpx;
    padding-left: 20rpx;
    float: left;
}
.jinru{
 width: 21%;
display: inline-block;
font-size: 30rpx;   
line-height: 180rpx;
text-align: center
}
.jinru text{
    padding:10rpx 6rpx;
    background:#d9002f ;
    border-radius: 5rpx;
    color: white;
   font-size: 29rpx;
}
.sc{
  white-space: nowrap;
  display: block;
  height:170rpx;
  margin-top:20rpx;
}
.one{
    /*background: red; */
    width: 165rpx; 
    height:165rpx;
     display: inline-block;
     margin: 10rpx;
}
.one image{
    height: 100%;
    width: 100%;
}

.yuan{
    display: inline-block;
    position: relative;
    top:-9rpx;
    left: -164rpx;
    background: whitesmoke;
    font-size:28rpx;
    /*border-radius:5rpx; */
    width: 100%;
    text-align: center
}
.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;
}

/*店铺保证金*/
.bao{
    height: 40rpx;
  line-height: 40rpx;
  padding-bottom: 10rpx;
}
.bao_img{
  width: 40rpx;
  height: 40rpx;
  position: relative;
  top: 10rpx;
}
/*在线客服*/
.lll{
width:71rpx;
height:69rpx;
position:fixed;
right:0px;
bottom: 88px;
float: right
}
.lll image{
width:100%;
height:100%;
}
contact-button{
position: relative;
top:-35px;
left:9px;
opacity: 0;
}
三、js页面代码如下:
// pages/shop/shop.js
var app = getApp();
Page({
  data:{
    shopList:[],
    page:2,
  },

  stroe:function(e){
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../shop_store/shop_store?shopId='+id,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  //详情页跳转
  jj: function (e) {
    var proid = e.currentTarget.dataset.pid;
    wx.navigateTo({
      url: "../product/detail?productId=" + proid
    })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/index',
      method:'post',
      data: {},
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {  
        var store_list = res.data.store_list;
        that.setData({
          shopList:store_list,
        });
      },
      error:function(e){
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      },
    })
  },
  getMore: function (e) {
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Shangchang/index',
      method: 'post',
      data: {
        page:that.data.page
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        if(res.data.status==1){
          var store_list = res.data.store_list;
          that.setData({
            page: that.data.page + 1,
            shopList: that.data.shopList.concat(store_list),
          });
        }else{
          wx.showToast({
            title: res.data.err,
            duration: 2000
          });
        }
      },
      error: function (e) {
        wx.showToast({
          title: '网络异常!',
          duration: 2000
        });
      },
    })
  },
  /**
   * 分享
   */
  onShareAppMessage: function (res) {
    var that = this;
    return {
      title: '店铺',
      path: '/pages/shop/shop',
      success: function (res) {
        // 分享成功
      },
      fail: function (res) {
        // 分享失败
      }
    }
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

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