<view class="movie"> <view class="nav_bar"> <scroll-view class="nav_bar_scroll" scroll-x="true"> <block wx:for="{{types}}" wx:key="" wx:for-item="type"> <block> <view bindtap="changeType" class="{{type.value == currentType ? 'current' : ''}} scroll_item" data-value="{{type.value}}">{{type.title}}</view> </block> </block> </scroll-view> </view> <!-- 活动列表 --> <view class="list"> <view class="card" wx:for="{{vipList}}" wx:key="{{item.id}}" data-value="{{item.id}}" bindTap="buyVIP"> <text class="type_text">VIP</text> <view class="info"> <view class="f-name"> <text class="info_item">{{item.itemName}}</text> </view> <view class="info_item" style="display:flex;flex-direction:row;align-items:center"> <text style="font-size:11pt;color:gray">{{item.describe}}</text> </view> </view> <text class="money">{{item.amount/100}}元</text> </view> </view> </view> |
.movie { height: 100%; display: flex; flex-direction: column; align-items: center; font-family: "微软雅黑" } .nav_bar{ box-sizing:border-box; position: fixed; top: 0px; left:0px; width: 100%; border-bottom: 1px solid #D5D5D5; display: flex; background-color: #ffffff; z-index: 1000; } .nav_bar_scroll{ flex:1; font-size:30rpx; width: 120rpx; height: 90rpx; box-sizing: border-box; white-space: nowrap; } .scroll_item{ display: inline-block; padding: 0 20rpx; width:148rpx; text-align:center; line-height:90rpx; } .nav_bar_scroll .current{ color:#479de6; } .f-name { display: flex; flex-direction: row; text-align: center; height: 23px; line-height: 20px; } .choose { color: red; } .card { display: flex; flex-direction: row; margin-bottom: 8px; background-color: #ffffff; padding: 7px 12px 7px 12px; line-height: 40px; } .type_text{ font-size: 40rpx; line-height: 120rpx; height: 120rpx; width: 120rpx; text-align: center; color: white; border-radius: 60rpx; background:#479de6; } .info { display: flex; flex-direction: column; width: 450rpx; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; padding-left: 10px; margin-top:5px; } .info_item { height: 55rpx; font-size:12pt; text-overflow: ellipsis; } .money { color: #fb5d5d; text-align: center; font-size: 30rpx; background: transparent; position: relative; } .body { display: flex; flex-direction: column; background-color: lightgrey; } .list { margin-top: 100rpx; width:100%; } |
var app = getApp(); var dialog = require("../../utils/dialog.js") var Util = require("../../utils/util.js"); var api = require("../../utils/api.js"); Page({ onLoad: function (options) { this.getList(1); }, getList:function(type){ dialog.loading(); var that = this; api.getVIPInfo({ data: { viplev: type }, success: (res) => { dialog.hide(); that.data.vipList = res.data.result; that.setData(that.data); }, fail: (res) => { dialog.toast("网络出错了~"); } }); }, //点击某一个title条 changeType:function(e){ var type = e.currentTarget.dataset.value if(type == this.data.currentType){ return; } this.setData({currentType:type}) this.data.currentType = type; this.getList(type) }, buyVIP:function(view){ var vipId = e.currentTarget.dataset.value; wx.showModal({ title: '提示', content: '小程序目前暂不支持在线支付,请到APP完成支付', confirmColor: '#479de6', success: function(res) { } }) }, onShareAppMessage: function() { return { title:'云车VIP', path:'pages/vip/vip' } }, data: { vipList:[], types:[{ value:1, title:"VIP(5座)" }, { value:2, title:"VIP(7座)" }, { value:3, title:"SVIP(5座)" }, { value:4, title:"SVIP(7座)" }], currentType:1, } }) |
模板简介:该模板名称为【微信小程序蓝色带顶部的导航会员卡列表页样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。