首页 > 小程序教程 > 微信小程序酒厂厂家签约列表页设计制作开发教程下载

微信小程序酒厂厂家签约列表页设计制作开发教程下载

上一篇 下一篇
本文给大家带来的是微信小程序酒厂厂家签约列表页设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/signedFactory/factoryList.wxml-->
<view class="container">
    <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for-items="{{tabs}}" wx:key="{{index}}">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; width:{{sliderWidth}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
                    <navigator url="factoryDetail" class="factoryList" hover-class="weui-cell_active" wx:for="{{factoryList}}" wx:for-item="list">
                    <view class="factoryList-hd">{{list.factory_name}}</view>
                    <view class="factoryList-bd">
                        <image class="imagesize" src="{{list.factory_img}}"></image>
                        <view class="factoryList-text font-color-999">{{list.factory_Int}}</view>
                    </view>
                     <view class="factoryList-ft">
                        <view class="foods-box">
                           <image src="{{item}}" wx:for="{{list.foods_img}}" ></image>
                        </view>
                        <view class="more font-color-c24e4e arrow-right">了解并签约</view>
                     </view>

                    </navigator>
                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
                    <navigator url="factoryDetail" class="factoryList" hover-class="weui-cell_active" wx:for="{{factoryList}}" wx:for-item="list">
                    <view class="factoryList-hd">{{list.factory_name}}</view>
                    <view class="factoryList-bd">
                        <image class="imagesize" src="{{list.factory_img}}"></image>
                        <view class="factoryList-text font-color-999">{{list.factory_Int}}</view>
                    </view>
                     <view class="factoryList-ft">
                        <view class="foods-box">
                           <image src="{{item}}" wx:for="{{list.foods_img}}" ></image>
                        </view>
                        <view class="more font-color-c24e4e arrow-right">了解并签约</view>
                     </view>

                    </navigator>
                </view>
            </view>
     </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/signedFactory/factoryList.wxss */
.weui-navbar__item{
    padding: 30rpx 0;
}
.weui-navbar__item.weui-bar__item_on{
    color: #c24e4e;
}
.weui-navbar__slider{
    background-color: #c24e4e;
}
.weui-navbar{
    background-color: #fff;
}

.factoryList{
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
}
.factoryList-hd{
    display: flex;
    align-items: center;
}
.factoryList-bd,.factoryList-ft{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.factoryList-bd{
    padding: 30rpx 0;
}

 
.factoryList-bd .imagesize{
   width: 150rpx;
   height: 150rpx;
   margin-right: 20rpx;
}
.factoryList-bd .factoryList-text{
  width: 490rpx;
  line-height: 1.2;
  text-indent: 2em;
  display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
   overflow: hidden;
 
}
.factoryList-ft image{
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
    
}
.more::before{
    border: 2rpx solid #c24e4e;
    border-top: none;
    border-right: none;
    right: 0rpx;
    
}
.more{
    padding-right: 30rpx;
}
三、js页面代码如下:
// pages/signedFactory/factoryList.js
Page({
  data:{
      tabs: ["全部厂家", "已签约厂家"],
        activeIndex: 0,
        sliderOffset: 0,
        sliderLeft: 0
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
       wx.getSystemInfo({
            success: (res)=>{
                this.setData({
                   sliderWidth: res.windowWidth / this.data.tabs.length,
                    sliderOffset: res.windowWidth / this.data.tabs.length * this.data.activeIndex
                });
            }
        });
        this.setData({
          factoryList:[
            {
              factory_name:'仁怀市茅台镇永泰酒业有限公司',
              factory_img:'/assets/testimages/timg1.jpg',
              factory_Int:'贵州省仁怀市茅台镇永泰酒业股份有限公司位于美丽的赤水河畔,与驰名中外的茅台集团共享得天独厚的土壤、气候、水质和微生物群等优越的自然条件。厂区占地面积60余亩,厂房面积5000多平方米,拥有多口酿造使用多年的老窖池,目前年生产能力约为1千多吨原酒。在茅台镇众多的酒厂中,永泰酒业公司是为数不多的资深厂家之一。',
              foods_img:[
                 '/assets/testimages/timg1.jpg'
              ,'/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg'
              ]
            },
             {
              factory_name:'仁怀市茅台镇永泰酒业有限公司',
              factory_img:'/assets/testimages/timg1.jpg',
              factory_Int:'贵州省仁怀市茅台镇永泰酒业股份有限公司位于美丽的赤水河畔,与驰名中外的茅台集团共享得天独厚的土壤、气候、水质和微生物群等优越的自然条件。厂区占地面积60余亩,厂房面积5000多平方米,拥有多口酿造使用多年的老窖池,目前年生产能力约为1千多吨原酒。在茅台镇众多的酒厂中,永泰酒业公司是为数不多的资深厂家之一。',
              foods_img:[
                 '/assets/testimages/timg1.jpg'
              ,'/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg','/assets/testimages/timg1.jpg'
              ]
            }
          ]
        })
  },
  tabClick: function (e) {
      this.setData({
          sliderOffset: e.currentTarget.offsetLeft,
          activeIndex: e.currentTarget.id
      });
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

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