首页 > 小程序教程 > 微信小程序蓝色带顶部的导航会员卡列表页样式设计制作开发教程

微信小程序蓝色带顶部的导航会员卡列表页样式设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序门店福利搜索功能样式设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<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>
 
二、wxss样式文件代码如下:
.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%;
}
三、js页面代码如下:
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, 
  }
})

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

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