微信小程序选项卡的简单实例

效果图

实现的功能：点击上面选项卡，下面商品内容实现切换，滑动下面的商品页面，上面的选项也随页面进行切换。
text.wxml：

<!-- 分类 -->
<view class='listMiddle swiper-tab'><view class='middle {{currentTab==0? "action" : ""}}' data-current="0" bindtap="clickTab">全部</view><view class='middle {{currentTab==1? "action":""}}' data-current="1" bindtap="clickTab">分类1</view><view class='middle {{currentTab==2? "action":""}}' data-current="2" bindtap="clickTab">分类2</view><view class='middle {{currentTab==3? "action":""}}' data-current="3" bindtap="clickTab">分类3</view>
</view>
<!-- 精选商品 -->
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" >
//注意这里只是写了循环出来一条数据，要实现多条数据，要学会用数据嵌套循环哦~~<swiper-item wx:for="{{jingxuan}}"><view class='loopmiddle'><view class='lo-left'><image src='{{item.hua}}'></image></view><view class='lo-middle'><view>{{item.guo}}</view><view>{{item.zhigong}}</view><view class='loo-bottom'><text>{{item.qi}}</text><image src='{{item.huo}}'></image><text>{{item.fen}}</text></view></view><view class='lo-right'><image src='{{item.xiaoche}}'></image></view></view></swiper-item>
</swiper>

test.js

var app = getApp()
Page({/*** 页面的初始数据*/data: {jingxuan: [{hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥71.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },{hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥72.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },{hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥73.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },{hua: "../../assets/hua.png", guo: "9.9元1斤惊爆价 - A级千禧圣女果", zhigong: "产地直供，一箱约8斤", qi: "￥74.90", huo: "../../assets/huomiao.png", fen: "已购999份", xiaoche: "../../assets/xiaoche.png", },],currentTab: 0,},//滑动切换swiperTab: function (e) {var that = this;that.setData({currentTab: e.detail.current});console.log(e.detail.current)},//点击切换clickTab: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current})}} ,

text.wxss

/* 分类 */
.listMiddle{display: flex;font-size: 40rpx;border-bottom: 1px solid #ebebeb;height: 90rpx;line-height: 90rpx;}
.middle{margin-left: 60rpx; height: 90rpx;width: 120rpx;}.action{height: 90rpx;width: 120rpx;color: #3ad965;border-bottom:2px solid #3ad965;
}
/* 精选商品开始 */
.loopmiddle{width: 690rpx;margin: 5rpx auto 0;/* overflow: hidden; */display: flex;margin-bottom: 40rpx;border-bottom: 1rpx solid #eff0f4;
}.lo-left{/* float: left; */height: 250rpx;width: 250rpx;
}
.lo-left image{height: 250rpx;width: 250rpx;
}
.lo-middle{margin-top:40rpx;
}
.lo-middle view:nth-child(1){font-size:25rpx;color:#676767;margin-left: 10rpx;}
.lo-middle view:nth-child(2){font-size:20rpx;color:#adadad;margin-top:20rpx;margin-left: 10rpx;}
.loo-bottom{margin-top: 40rpx;
}
.loo-bottom text:nth-child(1){margin-right: 15rpx;font-size:40rpx;color:#fe6400;}
.loo-bottom text:last-child{font-size:20rpx;color:#4b3333;}
.loo-bottom image{width: 35rpx;height: 35rpx;vertical-align: middle;
}
.lo-right{width: 50rpx;height: 50rpx;
}
.lo-right image{width: 50rpx;height: 50rpx;
}
.lo-right{margin-top:170rpx;
}
.active{color:aqua;border-bottom: 4rpx solid red;
}
.swiper-tab{width: 100%;border-bottom: 2rpx solid #ccc;text-align: center;height: 88rpx;line-height: 88rpx;font-weight: bold;
}

微信小程序选项卡的简单实例相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...
微信小程序消息通知简单Demo
前言最近项目有需求需要用到微信小程序推送消息,在此记录一下实验过程. 前提准备在开始前,你需要准备: 注册微信小程序一个简单的springBoot 项目微信开发者工具正式微信小程序发送 ...
爬去微信小程序服务器代码,Python爬取微信小程序通用方法代码实例详解
背景介绍最近遇到一个需求,大致就是要获取某个小程序上的数据.心想小程序本质上就是移动端加壳的浏览器,所以想到用Python去获取数据.在网上学习了一下如何实现后,记录一下我的实现过程以及所踩过的小坑 ...
微信小程序实现各种特效实例
写在前面最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助实例1:滚动tab选项卡先看一下 ...
微信小程序数组网页调用实例详解：李贺作品集
额,我觉得这个东西应该叫做数组,有没有更专业的说法,我实在不知道. 惯例,先看效果,只实现数组存储,点击跳转网页,其他的都省略了. 如图可见,这个小程序有两个页面,1是首页index,2是跳转页det ...
贪吃蛇程序 php,微信小程序-贪吃蛇教程实例
很久很久以前,差不多大半年前吧,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无事的我又写了一个小程序版下面这段话请务必阅读笔者是做iOS的,而小程序大部分都是前 ...
php 小程序回调,微信小程序Promise简化回调实例分享
Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供Promise对象.本文主要和大 ...
微信小程序嵌套h5页面+发布微信小程序（超级简单）
将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...
微信小程序选项卡数组列表单项选择切换效果
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法效果如图: wxml:<view class="item" wx:for="{{data}}&qu ...

微信小程序选项卡的简单实例

效果图

微信小程序选项卡的简单实例相关推荐

最新文章

热门文章

微信小程序 选项卡的简单实例

效果图

微信小程序 选项卡的简单实例相关推荐

最新文章

热门文章

微信小程序选项卡的简单实例

微信小程序选项卡的简单实例相关推荐