首页 > 小程序教程 > 微信小程序水果产品分类排行列表设计制作开发教程

微信小程序水果产品分类排行列表设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序水果产品分类排行列表设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<view class="list-tab">
    <ul>
        <li class="{{current == 0 ? 'active' : ''}}" catchtap="switchSlider" data-index="0">默认</li>
        <li class="{{current == 1 ? 'active' : ''}}" catchtap="switchSlider" data-index="1">价格</li>
        <li class="{{current == 2 ? 'active' : ''}}" catchtap="switchSlider" data-index="2">热销</li>
    </ul>
</view>

<swiper class="swiper-box"  current="{{current}}" indicator-dots="{{swiper.indicatorDots}}" autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" bindchange="changeSlider">
  <block>

  
<!-- 1 -->
    <swiper-item>
      <scroll-view scroll-y="true" class="scroll-box">
         <view class="list-view" >
           <view class="list-box" wx:for="{{listgoods}}" wx:for-item="list" wx:key="index" data-id="{{list.id}}" bindtap="lookdetail">
              <view class="list-images" ><image src="{{list.pic_url}}" /></view>
              <view class="list-text">
                  <text class="name">{{list.name}}</text>
                  <view class="txt">
                      <text class="price">{{list.price}}</text>
                      <text class="type">{{list.type}}</text>
                  </view>
              </view>
           </view>
          </view>
      </scroll-view>
    </swiper-item>
<!--2  -->
    <swiper-item>
    	<scroll-view scroll-y="true" class="scroll-box">
         <view class="list-view" >
           <view class="list-box" wx:for="{{listgoods}}" wx:for-item="list" wx:key="index">
              <view class="list-images"><image src="{{list.pic_url}}" /></view>
              <view class="list-text">
                  <text class="name">{{list.name}}</text>
                  <view class="txt">
                      <text class="price">{{list.price}}</text>
                      <text class="type">{{list.type}}</text>
                  </view>
              </view>
           </view>
          </view>
      </scroll-view>
    </swiper-item>
<!-- 3 -->
    <swiper-item>
    	<scroll-view scroll-y="true" class="scroll-box">
         <view class="list-view" >
           <view class="list-box" wx:for="{{listgoods}}" wx:for-item="list" wx:key="index">
              <view class="list-images"><image src="{{list.pic_url}}" /></view>
              <view class="list-text">
                  <text class="name">{{list.name}}</text>
                  <view class="txt">
                       <text class="price">{{list.price}}</text>
                      <text class="type">{{list.type}}</text>
                  </view>
              </view>
           </view>
          </view>
      </scroll-view>
    </swiper-item>

  </block>
</swiper>
 
二、wxss样式文件代码如下:
page{
  height: 100%;
}
.list-tab{
  height: 106rpx;
  box-sizing: border-box;
  padding: 5px 10px;
}
.list-tab ul{
  display: flex;
  height: 72rpx;
  border: 1px solid #008842;
  border-radius:12rpx;
}
.list-tab li{
  flex: 1;
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  color: #008842;
}
.list-tab .active{
  background: #008842;
  color: #ffffff;
}
/*list-box*/
.list-view{
  border-top: 1px solid #cccccc;
}
.list-box{
  display: flex;
  padding: 5px 10px;
  border-bottom: 1px solid #aaaaaa;
}
.list-images image{
  width: 170rpx;
  height: 170rpx;
}
.list-text {
  font-size: 14px;
  color: #666666;
  background: url(/images/icons/btn-tabs_09.png) no-repeat right center;
  background-size:60rpx;
}
.list-text .name{
  display: block;
  height: 100rpx;
  width: 500rpx;
  padding: 5px;
}
.list-text .txt{
  padding: 5px;
  color:#aaaaaa;

}
.list-text .price{
  font-size: 18px;
  color: red;
}
.swiper-box{
  height: 100%;
}
.scroll-box{
  height: 100%;
}
三、js页面代码如下:
var app = getApp()
Page({
  data:{
    current: 0,
    listgoods:[{
    "id":'0101001',
    "name": "kkkkkZespri佳沛新西兰阳光金奇异果6个92-114g/个(北京)",
    "price": "111.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img14.yiguoimg.com/e/ad/2016/160914/585749449477366062_260x320.jpg"
}, {
    "id":'0101002',
    "name": "智利蓝莓2盒(约125g/盒)",
    "pic_url": "http://img09.yiguoimg.com/e/ad/2016/161011/585749449909281099_260x320.jpg",
    "price": "177.0",
    "type": "3.3kg/箱"
}, {
    "id":'0101003',
    "name": "澳大利亚脐橙12个约160g/个(北京)",
    "price": "178.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img12.yiguoimg.com/e/ad/2016/160914/585749449480249646_260x320.jpg"
}, {
    "id":'0102001',
    "name": "Zespri佳沛新西兰阳光金奇异果6个92-114g/个(北京)",
    "price": "172.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img14.yiguoimg.com/e/ad/2016/160914/585749449477366062_260x320.jpg"
}, {
    "id":'0102002',
    "name": "智利蓝莓2盒(约125g/盒)",
    "pic_url": "http://img09.yiguoimg.com/e/ad/2016/161011/585749449909281099_260x320.jpg",
    "price": "171.0",
    "type": "3.3kg/箱"
}, {
    "id":'0102003',
    "name": "澳大利亚脐橙12个约160g/个(北京)",
    "price": "174.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img12.yiguoimg.com/e/ad/2016/160914/585749449480249646_260x320.jpg"
}, {
    "id":'0103001',
    "name": "Zespri佳沛新西兰阳光金奇异果6个92-114g/个(北京)",
    "price": "177.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img14.yiguoimg.com/e/ad/2016/160914/585749449477366062_260x320.jpg"
}, {
    "id":'0103002',
    "name": "智利蓝莓2盒(约125g/盒)",
    "pic_url": "http://img09.yiguoimg.com/e/ad/2016/161011/585749449909281099_260x320.jpg",
    "price": "173.0",
    "type": "3.3kg/箱"
}, {
    "id":'0103003',
    "name": "澳大利亚脐橙12个约160g/个(北京)",
    "price": "169.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img12.yiguoimg.com/e/ad/2016/160914/585749449480249646_260x320.jpg"
}, {
    "id":'0201001',
    "name": "Zespri佳沛新西兰阳光金奇异果6个92-114g/个(北京)",
    "price": "159.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img14.yiguoimg.com/e/ad/2016/160914/585749449477366062_260x320.jpg"
}, {
    "id":'0201002',
    "name": "智利蓝莓2盒(约125g/盒)",
    "pic_url": "http://img09.yiguoimg.com/e/ad/2016/161011/585749449909281099_260x320.jpg",
    "price": "149.0",
    "type": "3.3kg/箱"
}, {
    "id":'0202001',
    "name": "澳大利亚脐橙12个约160g/个(北京)",
    "price": "139.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img12.yiguoimg.com/e/ad/2016/160914/585749449480249646_260x320.jpg"
}, {
    "id":'1203001',
    "name": "Zespri佳沛新西兰阳光金奇异果6个92-114g/个(北京)",
    "price": "159.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img14.yiguoimg.com/e/ad/2016/160914/585749449477366062_260x320.jpg"
}, {
    "id":'1401001',
    "name": "智利蓝莓2盒(约125g/盒)",
    "pic_url": "http://img09.yiguoimg.com/e/ad/2016/161011/585749449909281099_260x320.jpg",
    "price": "181.0",
    "type": "3.3kg/箱"
}, {
    "id":'1101001',
    "name": "澳大利亚脐橙12个约160g/个(北京)",
    "price": "180.0",
    "type": "3.3kg/箱",
    "pic_url": "http://img12.yiguoimg.com/e/ad/2016/160914/585749449480249646_260x320.jpg"
}],  
  swiper:{
      indicatorDots: false,
      autoplay: false,
      interval: 5000,
      duration: 1000
      }
  },
  onPullDownRefresh: function () {
    console.log('onPullDownRefresh')
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    //ajax请求数据
    // wx.request({
    //         url: 'http://www.htmlk.cn/json-test/lists.json',
    //         header: {
    //             'Content-Type': 'application/json'
    //         },
    //         success: function(res) {
    //            switch1(res.data);
    //            console.log(res.data);
    //            that.setData({
    //                listgoods:res.data
    //            });
    //         }
    //     })
    //对商品进行价格排序
    console.log(this.data.listgoods);
    switch1(this.data.listgoods);
    function switch1(odata){
        for(var i=0;i<odata.length-1;i++){
                 //console.log(odata[i].price);
                for(var j=0;j<odata.length-i-1;j++){
                       // console.log(parseInt(odata[j].price)+"-----"+parseInt(odata[j+1].price));
                  if(parseInt(odata[j].price)>parseInt(odata[j+1].price)){
                    var temp=odata[j];
                        odata[j]=odata[j+1];
                        odata[j+1]=temp;
                  }
                }
        }
    }    
  },
  //详情页跳转
  lookdetail:function(e){
    var lookid=e.currentTarget.dataset;
    console.log(e.currentTarget.dataset.id);
    wx.navigateTo({
      url:"/pages/yiguo/detail/detail?id="+lookid.id
    })
  },
  switchSlider:function(e){
    this.setData({
      current:e.target.dataset.index
    })
  },
  changeSlider:function(e){
    this.setData({
      current: e.detail.current
    })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }

})

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

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