欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    2018-07-03 09:43 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序品牌电梯商铺信息页面样式设计制作开发教程,制作好以后效果图如下:
    一、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>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议