<!--index.wxml--> <!--<loading hidden="{{!loading}}"> {{title}} </loading>--> <view class="container"> <scroll-view scroll-y="true" class="page-body" bindscrolltolower="loadMore"> <!--banner--> <view class="swiper"> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for-items="{{banner_url}}" wx:key="item.id"> <swiper-item> <block wx:if="{{item}}"> <image src="{{item}}" mode="aspectFill"/> </block> <block wx:else> <image src="../../images/default_pic.png" mode="aspectFill"></image> </block> </swiper-item> </block> </swiper> </view> <!--nav--> <view class="nav_top"> <block wx:for="{{navTopItems}}" wx:key="item.id"> <view class="nav_top_items {{curNavId == item.id ? 'active_'+colors[index] : ''}}" bindtap="switchTab" data-index="{{index}}" data-id="{{item.id}}"> <image src="{{item.icon}}" mode="aspectFill"></image> <text>{{item.title}}</text> </view> </block> </view> <!--list--> <view class="nav_section"> <view wx:if="{{list[curIndex]}}"> <block wx:for="{{list[curIndex]}}" wx:key="item.id"> <view class="nav_section_items" > <!--image--> <view class="section_image" bindtap="navigateDetail" data-aid="{{item.id}}"> <block wx:if="{{item.coverpath}}"> <image src="{{item.coverpath}}" mode="aspectFill"></image> </block> <block wx:else> <image src="../../images/default_pic.png" mode="aspectFill"></image> </block> </view> <!--content--> <view class="section_cont" bindtap="navigateDetail" data-aid="{{item.id}}"> <view class="section_cont_sub"> <text>{{item.subject}}</text> </view> <view class="section_cont_price">价格:{{item.price}}</view> <view>{{item.message}}</view> </view> <!--book--> <view class="section_book" bindtap="bookTap" data-aid="{{item.id}}"> <text>预约</text> </view> </view> </block> </view> <view wx:else>暂无数据</view> </view> </scroll-view> </view> |
/**index.wxss**/ /* 轮播图 */ .swiper{ width:100%; margin:0rpx; } .swiper image{ display: inline; } /* 搜索 */ .search{ width:100%; height:90rpx; background:#efeff4; border-bottom:2rpx solid #ddd; font-size:28rpx; padding-top:25rpx; display: flex; flex-direction: row; justify-content: space-around; } .search_input{ width:610rpx; height:64rpx; border:1rpx solid #ddd; border-radius:12rpx; display: flex; flex-direction: row; justify-content: start; background: #ffffff; margin-left:10rpx; padding:0rpx 10rpx; box-sizing:border-box; } .search_input .arrow_down_icon{ width:24rpx; height:14rpx; margin: 26rpx 10rpx; } .search_input .search_icon{ width:34rpx; height:34rpx; margin: 15rpx 10rpx 15rpx 20rpx; } .search_input .search_icon image, .search_input .arrow_down_icon image{ width:100%; height: 100%; display: block; } .search_input input{ width:470rpx; height:64rpx; line-height: 64rpx; padding:4rpx 20rpx; font-size:28rpx; font-family:'微软雅黑'; box-sizing:border-box; color:#a9a9a9; } .search_input picker{ height:64rpx; line-height: 64rpx; text-align: center; color:#585858; margin-left:6rpx; } .search .search_btn{ margin-top:14rpx; color:#38b337; font-size:32rpx; margin-right:10rpx; } /* 导航条 */ .nav_top{ display:flex; flex-direction: row; justify-content: space-around; width:100%; box-sizing: border-box; padding:20rpx 10rpx; background:url(../../images/black_line.png) repeat; color:#fff; } .nav_top_items{ text-align: center; font-size:28rpx; width:100rpx; border-radius:8rpx; box-sizing:border-box; } .nav_top_items image{ width:83rpx; height:93rpx; display: inline-block; } .nav_top .active{ color:#38b337; } .active_red{ color:#e5004f; } .active_orange{ color:#eb6100; } .active_yellow{ color:#fff100; } .active_green{ color:#8fc31f; } .active_purple{ color:#aa2adf; } /* 导航对应内容项 */ .nav_section{ width:100%; } .nav_section_items{ display:flex; flex-direction: row; justify-content: space-between; padding:30rpx; border-bottom:2rpx solid #ddd; position: relative; } .nav_section_items:active{ background:#ddd; } .nav_section_items .section_image{ width:170rpx; height:158rpx; } .nav_section_items .section_image image{ width:100%; height:100%; } .nav_section_items .section_cont{ width:400rpx; font-size:26rpx; color:#a9a9a9; } .nav_section_items .section_cont view{ overflow:hidden; text-overflow: ellipsis; white-space:nowrap; display: block; } .nav_section_items .section_cont .section_cont_intro{ white-space:normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nav_section_items .section_cont .section_cont_sub{ font-size: 30rpx; line-height:60rpx; color:#000; margin-bottom:10rpx; } .nav_section_items .section_cont .section_cont_price{ font-size:32rpx; color:#d24a58; } .nav_section_items .section_book{ width:80rpx; height:80rpx; font-size:26rpx; border-radius:100%; background:#d24a58; line-height: 80rpx; color:#fff; text-align: center; margin-top:35rpx; } |
//index.js //获取应用实例 var app = getApp() var fileData = require('../../utils/data.js') Page({ // 页面初始数据 data: { colors:['red','orange','yellow','green','purple'], // banner 初始化 banner_url: fileData.getBannerData(), indicatorDots: true, vertical: false, autoplay: true, interval: 3000, duration: 1000, // nav 初始化 navTopItems: fileData.getIndexNavData(), navSectionItems: fileData.getIndexNavSectionData(), curNavId: 1, curIndex: 0 }, onLoad:function(){ var that = this that.setData({ list: that.data.navSectionItems }) }, //标签切换 switchTab: function(e) { let id = e.currentTarget.dataset.id, index = parseInt(e.currentTarget.dataset.index) this.curIndex = parseInt(e.currentTarget.dataset.index) console.log(e) var that = this this.setData({ curNavId: id, curIndex: index, }) }, // 跳转至详情页 navigateDetail: function(e){ wx.navigateTo({ url:'../detail/detail?artype=' + e.currentTarget.dataset.artype }) }, // 加载更多 loadMore: function (e) { console.log('加载更多') var curid = this.data.curIndex if (this.data.navSectionItems[curid].length === 0) return var that = this that.data.navSectionItems[curid] = that.data.navSectionItems[curid].concat(that.data.navSectionItems[curid]) that.setData({ list: that.data.navSectionItems, }) }, // book bookTap: function(e){ wx.navigateTo({ url:'../book/book?aid='+e.currentTarget.dataset.aid }) } }) |
模板简介:该模板名称为【微信小程序美容美甲商城首页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。