微信小程序实现跟随菜单效果和循环嵌套加载数据


Posted in Javascript onNovember 21, 2017

本文实例为大家分享了微信小程序实现跟随菜单效果、微信小程序循环嵌套加载数据,供大家参考,具体内容如下

效果如图:

微信小程序实现跟随菜单效果和循环嵌套加载数据

代码如下:

wxml

//使用循环嵌套data数据格式写对即可
<scroll-view class="left" scroll-y>  
  <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}" bindtap="tap">
   {{item.txt}}
  </view>
 </scroll-view>

<scroll-view class="right" scroll-y bindscroll="scroll" scroll-into-view="{{toView}}">
  <view id="{{item.id}}" wx:for="{{right}}">

   <view class="title">
    <text class="line"></text>
    {{item.txt}}
    <text class="line"></text>
   </view> 

   <view class="li" wx:for="{{item.li}}">
    <image src="{{item.src}}"></image>
    <text class="name">{{item.name}}</text>
   </view>

  </view>
 </scroll-view>

js

Page({
 data: {
  toView: 'red1',
  _click:0,
  left: [{ txt: '新品', id: 'new' }, { txt: '手机', id: 'phone' }, { txt: '电视', id: 'mv' }, { txt: '电脑', id: 'computer' }],
  right: [
   { txt: '新品', id: 'new',li: [{ src: '../../assets/images/max1.jpg', name: '小米noto' }, { src: '../../assets/images/max1.jpg', name: '小米mix' }, { src: '../../assets/images/max3.jpg', name: '小米5c' }, { src: '../../assets/images/max2.jpg', name: '小米notp' }, { src: '../../assets/images/max2.jpg', name: '小米note5' }, { src: '../../assets/images/max2.jpg', name: '小米6' }]}, 
   { txt: '手机', id: 'phone',li: [{ src: '../../assets/images/max2.jpg', name: '小米6s' }, { src: '../../assets/images/max3.jpg', name: '小米max' }, { src: '../../assets/images/max2.jpg', name: '小米5s' }, { src: '../../assets/images/max1.jpg', name: '小米li' }, { src: '../../assets/images/max3.jpg', name: '小米4' }, { src: '../../assets/images/max1.jpg', name: '小米max' }]}, 
   { txt: '电视', id: 'mv', li: [{ src: '../../assets/images/max3.jpg', name: '小米6' }, { src: '../../assets/images/max2.jpg', name: '小米mix' }, { src: '../../assets/images/max1.jpg', name: '小米7s' }, { src: '../../assets/images/max3.jpg', name: '小米2' }, { src: '../../assets/images/max1.jpg', name: '小米note7' }, { src: '../../assets/images/max3.jpg', name: '小米8' }] }, 
   { txt: '电脑', id: 'computer', li: [{ src: '../../assets/images/max1.jpg', name: '小米2' }, { src: '../../assets/images/max1.jpg', name: '小米mix' }, { src: '../../assets/images/max2.jpg', name: '小米max' }, { src: '../../assets/images/max1.jpg', name: '小米6' }, { src: '../../assets/images/max3.jpg', name: '小米note' }, { src: '../../assets/images/max1.jpg', name: '小米max' }] }]
 },

 scroll: function (e) {
  console.log(e)//右侧列表滑动-左侧列表名称样式跟着改变,然而我不会写,搁置中,谁会告诉我,谢谢!
 },
 tap: function (e) { 
  var j = parseInt(e.currentTarget.dataset.i);
  this.setData({
   toView: this.data.left[j].id,//控制视图滚动到为此id的<view>
   _click:j           //控制左侧点击后样式
    })
 },
})

wxss

page{border-top:1px solid #f6f6f6;}

.left{
 height:100%;
 width: 19%;
 display: inline-block;
 background:#fff;
 text-align:center;
 border-right:1px solid #eee;
 }
.leftlist{
 font-size:12px;
 padding:10px;
 }

.right{
 height:100%;
 width: 80%;
 display: inline-block;
 background:#fff;
 text-align:center;
 }

.line{
 width:15px;
 height:1px;
 background:#ddd;
 display:inline-block;
 vertical-align:super;
 margin:0 15px;
}

.li{ 
 height:10%;
 width:30%;
 display:inline-block;
 text-align:center;
}

.li image{width:60px;height:60px;}

.li .name{
 font-size:12px;
 display:block;
 color:#888;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

.title{padding:20px 0;}
.yes{color: #f99;font-size: 14px;}

友情提示:

1、左侧点击样式改变:

利用自身index与点击的元素的index比较。
data-i=“{{获取当前index传给_click保存}}”,
class=”leftlist {{index==_click?'yes':”}}”,
此处index是自身的,如果自身和点击的一致就添加,yes类名,否侧滞空清除yes样式。

2、点击左侧,右侧跟随:

利用scroll-into-view=”{{id}}”, 视图会滚动到id为此id的view标签。我是直接从data数据里取得id,也可以直接获取点击元素id。

3、循环嵌套:data数据格式写对,按照官方文档就行。

Javascript 相关文章推荐
Javascript this 的一些学习总结
Aug 02 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
微信小程序实现复选框效果
Dec 28 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
微信小程序实现tab切换效果
Nov 21 #Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python 实现堆排序算法代码
2012/06/05 Python
python双向链表实现实例代码
2013/11/21 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
简单学习Python time模块
2016/04/29 Python
python验证码识别的示例代码
2017/09/21 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python复制文件到指定目录的实例
2018/04/27 Python
详解Python中的四种队列
2018/05/21 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
HR喜欢的自荐信格式
2013/10/08 职场文书
爱心募捐通知范文
2015/04/27 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL