<!--technician.wxml--> <view class="container"> <scroll-view scroll-y="true" class="page-body" bindscrolltolower="loadMore"> <!--category picker--> <view class="ar_picker" style="background:#fff"> <view class="ar_picker_wrap"> <picker bindchange="bindCasPickerChange" value="{{casIndex}}" range="{{casArray}}"> <view> <text>{{casArray[casIndex]}}</text> </view> </picker> </view> </view> <!--address picker--> <view class="ar_picker"> <view class="ar_picker_wrap"> <picker bindchange="bindAddrPickerChange" value="{{addrIndex}}" range="{{addrArray}}"> <view> <text>{{addrArray[addrIndex]}}</text> </view> </picker> </view> </view> <!--list--> <view class="nav_section"> <view wx:if="{{list}}"> <block wx:for="{{list}}" wx:key="item.id"> <view class="nav_section_items" bindtap="navigateDetail" data-aid="{{item.id}}"> <!--image--> <view class="section_image" > <block wx:if="{{item.avatar}}"> <image src="{{item.avatar}}" mode="aspectFill"></image> </block> <block wx:else> <image src="../../images/default_pic.png" mode="aspectFill"></image> </block> </view> <!--content--> <view class="section_cont" > <view class="section_cont_sub"> <text>{{item.company}}</text> </view> <view class="section_cont_price" style="color:#000">{{item.nickname}}<text class="section_cont_price"> {{item.price}}</text></view> <view>{{item.message}}</view> </view> <!--book--> <view class="section_book" > <view>{{item.distance}}</view> </view> </view> </block> </view> <view wx:else>暂无数据</view> </view> </scroll-view> </view> |
/**index.wxss**/ .container{ padding:0; margin:0; } .ar_picker{ width:100%; font-size:30rpx; color:#000; background: #efeff4; margin:0; padding:10rpx 0rpx; } .ar_picker .ar_picker_wrap{ width: 670rpx; background: #fff url(../../images/arrow.png) no-repeat right center; background-size:25rpx 14rpx; background-position:650rpx; border-radius:20rpx; padding:10rpx 30rpx; margin:10rpx auto; border:1px solid #ddd; } /* 导航条 */ .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:380rpx; 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{ height:80rpx; font-size:26rpx; background:url(../../images/location.png) no-repeat left; background-size:17rpx 28rpx; line-height: 80rpx; color:#d24a58; text-align: left; margin-top:35rpx; padding-left:30rpx; } |
/*technician.js*/ //获取应用实例 var app = getApp() var fileData = require('../../utils/data.js') var util = require('../../utils/util') Page({ // 页面初始数据 data: { // nav 初始化 // cas picker casArray: ['美发','美容','美甲','美睫'], casIndex:0, // addr picker addrArray: util.replacePhone(fileData.userData().addrs,false), addrIndex:0, skillData: fileData.getSkilledData(), curNavId: 1, curIndex: 0 }, onLoad:function(){ var that = this that.setData({ list: that.data.skillData }) }, // 跳转至详情页 navigateDetail: function(e){ wx.navigateTo({ url:'../technicain_detail/technicain_detail?artype=' + e.currentTarget.dataset.arid }) }, // 加载更多 loadMore: function (e) { console.log('加载更多') if (this.data.skillData.length === 0) return var that = this // 由于是模拟数据,加载更多时候,数据重复加载 that.data.skillData= that.data.skillData.concat(that.data.skillData) that.setData({ list: that.data.skillData, }) }, // 类别选择 bindCasPickerChange:function(e){ console.log('Category picker发送选择改变,携带值为', e.detail.value) this.setData({ casIndex: e.detail.value }) }, // 地址选择 bindAddrPickerChange:function(e){ console.log('Category picker发送选择改变,携带值为', e.detail.value) this.setData({ addrIndex: e.detail.value }) } }) |
模板简介:该模板名称为【微信小程序美容美甲技师预约列表设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。