解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

向右看齐 2021-09-17 02:48 397阅读 0赞

解决Echarts在微信小程序tab切换时的显示会出现位置移动问题

我的js

  1. var dateTimePicker = require('../../utils/dateTimePicker.js');
  2. var wxCharts = require('../../utils/wxcharts.js');
  3. var util = require('../../utils/util.js');
  4. var app = getApp();
  5. Page({
  6. /**
  7. * 页面的初始数据
  8. */
  9. data: {
  10. selected: true,
  11. selected1: false,
  12. date: '',
  13. date1: '',
  14. startYear: 2008,
  15. endYear: 2222,
  16. // 日期数据
  17. datas: [],
  18. // 月数据
  19. attendDays: '',
  20. lateTimes: '',
  21. leaveEarlyTimes: '',
  22. unusualTimes: '',
  23. zao: '',
  24. chi: '',
  25. qifen: '',
  26. items: [{
  27. name: 'morning',
  28. value: '上午',
  29. checked: 'true'
  30. }, {
  31. name: 'moom',
  32. value: '下午'
  33. }, ]
  34. },
  35. zaodao: function() {
  36. var that = this;
  37. var time = that.data.date.substring(0, 10);
  38. wx.navigateTo({
  39. url: '../zaodao/zaodao?id=' + time,
  40. })
  41. },
  42. chidao: function() {
  43. var that = this;
  44. var ytime = that.data.date1.substring(0, 7);
  45. wx.navigateTo({
  46. url: '../chidao/chidao?id=' + ytime,
  47. })
  48. },
  49. qifen: function() {
  50. var that = this;
  51. var ytime = that.data.date1.substring(0, 7);
  52. wx.navigateTo({
  53. url: '../qifen/qifen?id=' + ytime,
  54. })
  55. },
  56. // 单选按钮
  57. radioChange: function(e) {
  58. var that = this;
  59. console.log("radio", e.detail.value);
  60. var time = that.data.date.substring(0, 10);
  61. if (e.detail.value == "morning") {
  62. // 发送用户请求
  63. wx.request({
  64. method: 'GET',
  65. header: {
  66. 'Authorization': 'Bearer' + wx.getStorageSync('token')
  67. },
  68. success(res) {
  69. new wxCharts({
  70. canvasId: 'ringCanvas',
  71. type: 'ring',
  72. legend: false,
  73. extra: {
  74. ringWidth: 15, //圆环的宽度
  75. pie: {
  76. offsetAngle: -45 //圆环的角度
  77. }
  78. },
  79. series: [{
  80. data: res.data.data.normalNum,
  81. }, {
  82. data: res.data.data.beLateNum,
  83. }, {
  84. data: res.data.data.leaveNum,
  85. }, {
  86. data: res.data.data.uncheckedNum,
  87. }],
  88. width: 320,
  89. height: 200,
  90. dataLabel: false
  91. });
  92. console.log("考勤上午按钮", res.data.data);
  93. that.setData({
  94. datas: res.data.data,
  95. })
  96. wx.showToast({
  97. title: '加载成功',
  98. icon: 'loading',
  99. duration: 500
  100. })
  101. }
  102. })
  103. } else {
  104. // 发送用户请求
  105. wx.request({
  106. method: 'GET',
  107. header: {
  108. 'Authorization': 'Bearer' + wx.getStorageSync('token')
  109. },
  110. success(res) {
  111. new wxCharts({
  112. canvasId: 'ringCanvas',
  113. type: 'ring',
  114. legend: false,
  115. extra: {
  116. ringWidth: 15, //圆环的宽度
  117. pie: {
  118. offsetAngle: -45 //圆环的角度
  119. }
  120. },
  121. series: [{
  122. data: res.data.data.normalNum,
  123. }, {
  124. data: res.data.data.beLateNum,
  125. }, {
  126. data: res.data.data.leaveNum,
  127. }, {
  128. data: res.data.data.uncheckedNum,
  129. }],
  130. width: 320,
  131. height: 200,
  132. dataLabel: false
  133. });
  134. console.log("考勤下午按钮", res.data.data);
  135. that.setData({
  136. datas: res.data.data,
  137. })
  138. wx.showToast({
  139. title: '加载成功',
  140. icon: 'loading',
  141. duration: 500
  142. })
  143. }
  144. })
  145. }
  146. },
  147. /**
  148. * 生命周期函数--监听页面加载
  149. */
  150. onLoad: function(options) {
  151. var that = this;
  152. console.log("kq,username", wx.getStorageSync("username"));
  153. // 获取当天时间
  154. var time = util.formatTime(new Date());
  155. that.setData({
  156. date: time,
  157. date1: time,
  158. username: wx.getStorageSync("username"),
  159. });
  160. // 获取完整的年月日 时分秒,以及默认显示的数组
  161. var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  162. var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  163. // 精确到分的处理,将数组的秒去掉
  164. var lastArray = obj1.dateTimeArray.pop();
  165. var lastTime = obj1.dateTime.pop();
  166. },
  167. // 改变日期
  168. changeDate(e) {
  169. // 全局
  170. var that = this;
  171. that.setData({
  172. date: e.detail.value
  173. });
  174. var date = e.detail.value;
  175. // 发送用户请求
  176. wx.request({
  177. method: 'GET',
  178. header: {
  179. 'Authorization': 'Bearer' + wx.getStorageSync('token')
  180. },
  181. success(res) {
  182. new wxCharts({
  183. canvasId: 'ringCanvas',
  184. type: 'ring',
  185. legend: false,
  186. extra: {
  187. ringWidth: 15, //圆环的宽度
  188. pie: {
  189. offsetAngle: -45 //圆环的角度
  190. }
  191. },
  192. series: [{
  193. data: res.data.data.normalNum,
  194. }, {
  195. data: res.data.data.beLateNum,
  196. }, {
  197. data: res.data.data.leaveNum,
  198. }, {
  199. data: res.data.data.uncheckedNum,
  200. }],
  201. width: 320,
  202. height: 200,
  203. dataLabel: false
  204. });
  205. console.log("选择日期数据", res.data.data);
  206. that.setData({
  207. datas: res.data.data,
  208. })
  209. wx.showToast({
  210. title: '加载成功',
  211. icon: 'loading',
  212. duration: 500
  213. })
  214. }
  215. })
  216. },
  217. // 改变月份
  218. changeDate1(e) {
  219. // 全局
  220. var that = this;
  221. that.setData({
  222. date1: e.detail.value, //数据源
  223. })
  224. var date1 = e.detail.value;
  225. // 发送用户请求
  226. wx.request({
  227. method: 'GET',
  228. header: {
  229. 'Authorization': 'Bearer' + wx.getStorageSync('token')
  230. },
  231. success(res) {
  232. console.log("家长的月考勤", res.data)
  233. if (res.data.code == 1) {
  234. that.setData({
  235. attendDays: 0,
  236. lateTimes: 0,
  237. leaveEarlyTimes: 0,
  238. unusualTimes: 0,
  239. })
  240. wx.showModal({
  241. title: '提示',
  242. content: '当天没有数据',
  243. // showCancel: false,
  244. success: function(res) {
  245. if (res.confirm) {
  246. console.log('用户点击确定');
  247. wx.navigateBack({
  248. delta: 1 //小程序关闭当前页面返回上一页面
  249. })
  250. } else if (res.cancel) {
  251. console.log('用户点击取消');
  252. }
  253. }
  254. })
  255. } else {
  256. that.setData({
  257. attendDays: res.data.data.attendDays,
  258. lateTimes: res.data.data.lateTimes,
  259. leaveEarlyTimes: res.data.data.leaveEarlyTimes,
  260. unusualTimes: res.data.data.unusualTimes,
  261. })
  262. wx.showToast({
  263. title: '加载成功',
  264. icon: 'loading',
  265. duration: 500
  266. })
  267. }
  268. }
  269. })
  270. },
  271. /**
  272. * 生命周期函数--监听页面初次渲染完成
  273. */
  274. onReady: function() {
  275. var that = this;
  276. /**
  277. * 获取系统信息
  278. */
  279. // wx.getSystemInfo({
  280. // success: function(res) {
  281. // that.setData({
  282. // winWidth: res.windowWidth,
  283. // winHeight: res.windowHeight
  284. // });
  285. // }
  286. // });
  287. },
  288. /**
  289. * 滑动切换tab
  290. */
  291. bindChange: function(e) {
  292. var that = this;
  293. console.log("滑块", e.detail.current);
  294. that.setData({
  295. currentTab: e.detail.current
  296. });
  297. },
  298. /**
  299. * 点击tab切换
  300. */
  301. swichNav: function(e) {
  302. console.log("切换", this.data.currentTab);
  303. console.log("切换", e.target.dataset.current);
  304. var that = this;
  305. that.setData({
  306. currentTab: e.target.dataset.current
  307. });
  308. if (e.target.dataset.current == 0){
  309. console.log(e.target.dataset.current == 0)
  310. new wxCharts({
  311. canvasId: 'ringCanvas',
  312. type: 'ring',
  313. legend: false,
  314. extra: {
  315. ringWidth: 15, //圆环的宽度
  316. pie: {
  317. offsetAngle: -45 //圆环的角度
  318. }
  319. },
  320. // series: [{
  321. // data: res.data.data.normalNum,
  322. // }, {
  323. // data: res.data.data.beLateNum,
  324. // }, {
  325. // data: res.data.data.leaveNum,
  326. // }, {
  327. // data: res.data.data.uncheckedNum,
  328. // }],
  329. series: [{
  330. data: 10,
  331. }, {
  332. data: 50,
  333. }, {
  334. data: 30,
  335. }, {
  336. data: 40,
  337. }],
  338. width: 320,
  339. height: 200,
  340. dataLabel: false
  341. });
  342. }
  343. // if (this.data.currentTab === e.target.dataset.current) {
  344. // return false;
  345. // } else {
  346. // console.log("点击切换", e.target.dataset.current)
  347. // that.setData({
  348. // currentTab: e.target.dataset.current
  349. // })
  350. // }
  351. },
  352. /**
  353. * 生命周期函数--监听页面显示
  354. */
  355. onShow: function() {
  356. var windowWidth = '',
  357. windowHeight = '';
  358. try {
  359. var res = wx.getSystemInfoSync();
  360. windowWidth = res.windowWidth / 750 * 690;
  361. windowHeight = res.windowWidth / 750 * 550
  362. } catch (e) {
  363. console.error('getSystemInfoSync failed!');
  364. }
  365. var that = this;
  366. console.log("家长的日考勤", that.data.date.substring(0, 10));
  367. let studentName = "无名氏"
  368. var time = that.data.date.substring(0, 10);
  369. // 家长的日考勤
  370. wx.request({
  371. method: 'GET',
  372. header: {
  373. 'Authorization': 'Bearer' + wx.getStorageSync('token'),
  374. },
  375. success(res) {
  376. console.log("家长的日考勤", res.data);
  377. new wxCharts({
  378. canvasId: 'ringCanvas',
  379. type: 'ring',
  380. legend: false,
  381. extra: {
  382. ringWidth: 15, //圆环的宽度
  383. pie: {
  384. offsetAngle: -45 //圆环的角度
  385. }
  386. },
  387. // series: [{
  388. // data: res.data.data.normalNum,
  389. // }, {
  390. // data: res.data.data.beLateNum,
  391. // }, {
  392. // data: res.data.data.leaveNum,
  393. // }, {
  394. // data: res.data.data.uncheckedNum,
  395. // }],
  396. series: [{
  397. data: 10,
  398. }, {
  399. data: 50,
  400. }, {
  401. data: 30,
  402. }, {
  403. data: 40,
  404. }],
  405. width: 320,
  406. height: 200,
  407. // width: windowWidth,
  408. // height: windowHeight,
  409. dataLabel: false
  410. });
  411. that.setData({
  412. datas: res.data.data,
  413. })
  414. wx.showToast({
  415. title: '加载成功',
  416. icon: 'loading',
  417. duration: 500
  418. })
  419. }
  420. })
  421. // 家长的月考勤
  422. console.log("家长的月考勤", that.data.date1.substring(0, 7));
  423. var ytime = that.data.date1.substring(0, 7);
  424. wx.request({
  425. method: 'GET',
  426. header: {
  427. 'Authorization': 'Bearer' + wx.getStorageSync('token')
  428. },
  429. success(res) {
  430. console.log("家长的月考勤", res.data)
  431. if (res.data.code == 1) {
  432. that.setData({
  433. attendDays: 0,
  434. lateTimes: 0,
  435. leaveEarlyTimes: 0,
  436. unusualTimes: 0,
  437. })
  438. } else {
  439. that.setData({
  440. attendDays: res.data.data.attendDays,
  441. lateTimes: res.data.data.lateTimes,
  442. leaveEarlyTimes: res.data.data.leaveEarlyTimes,
  443. unusualTimes: res.data.data.unusualTimes,
  444. })
  445. }
  446. }
  447. })
  448. // 请求榜单
  449. wx.request({
  450. method: 'GET',
  451. header: {
  452. 'Authorization': 'Bearer' + wx.getStorageSync("token"),
  453. },
  454. success: function(res) {
  455. console.log("考勤首页榜单早到", res.data);
  456. if (res.data.data != null) {
  457. that.setData({
  458. zao: res.data.data[0].studentName,
  459. })
  460. } else {
  461. that.setData({
  462. zao: studentName,
  463. })
  464. }
  465. }
  466. })
  467. // 迟到
  468. wx.request({
  469. method: 'GET',
  470. header: {
  471. Authorization: 'Bearer' + wx.getStorageSync("token"),
  472. },
  473. success: function(res) {
  474. console.log("考勤首页榜单迟到", res.data);
  475. if (res.data.data != null) {
  476. that.setData({
  477. chi: res.data.data[0].studentName,
  478. })
  479. } else {
  480. that.setData({
  481. chi: studentName,
  482. })
  483. }
  484. }
  485. })
  486. // 勤奋榜
  487. wx.request({
  488. method: 'GET',
  489. header: {
  490. Authorization: 'Bearer' + wx.getStorageSync("token"),
  491. },
  492. success: function(res) {
  493. console.log("考勤首页榜单勤奋", res.data);
  494. if (res.data.data != null) {
  495. that.setData({
  496. qifen: res.data.data[0].studentName,
  497. })
  498. } else {
  499. that.setData({
  500. qifen: studentName,
  501. })
  502. }
  503. }
  504. })
  505. },
  506. selected: function (e) {
  507. this.setData({
  508. selected1: false,
  509. selected: true
  510. })
  511. },
  512. selected1: function (e) {
  513. this.setData({
  514. selected: false,
  515. selected1: true
  516. })
  517. },
  518. /**
  519. * 生命周期函数--监听页面隐藏
  520. */
  521. onHide: function() {
  522. },
  523. /**
  524. * 生命周期函数--监听页面卸载
  525. */
  526. onUnload: function() {
  527. },
  528. /**
  529. * 页面相关事件处理函数--监听用户下拉动作
  530. */
  531. onPullDownRefresh: function() {
  532. },
  533. /**
  534. * 页面上拉触底事件的处理函数
  535. */
  536. onReachBottom: function() {
  537. },
  538. /**
  539. * 用户点击右上角分享
  540. */
  541. onShareAppMessage: function() {
  542. }
  543. })
  544. <!-- <view class="swiper-tab">
  545. <view class="swiper-tab-list {
  546. {currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">日统计</view>
  547. <view class="swiper-tab-list {
  548. {currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">月统计</view>
  549. </view> -->
  550. <view class="head">
  551. <view class="head_item {
  552. {selected?'head_itemActive':''}}" bindtap="selected">日考勤</view>
  553. <view class="ring"></view>
  554. <view class="head_item {
  555. {selected1?'head_itemActive':''}}" bindtap='selected1'>月考勤</view>
  556. </view>
  557. <!-- 下方style="height:{
  558. {winHeight - 31}}px" -->
  559. <!-- <swiper current="{
  560. {currentTab}}" class="swiper-box" duration="300" style="height:500px" bindchange="bindChange"> -->
  561. <!-- <swiper-item> -->
  562. <view class="main {
  563. {selected?'show':'hidden'}}">
  564. <view class='hr'></view>
  565. <view class='bgone'>
  566. <view class='zz'>
  567. <view class='time'>
  568. <picker mode="date" value="{
  569. {date}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate">
  570. <view>
  571. {
  572. {util.sub(date)}}
  573. </view>
  574. </picker>
  575. </view>
  576. <radio-group class="radio-group" bindchange="radioChange">
  577. <label class="radio" wx:for="{
  578. {items}}">
  579. <radio value="{
  580. {item.name}}" checked="{
  581. {item.checked}}" /> {
  582. {item.value}}
  583. </label>
  584. </radio-group>
  585. <view class='name'>{
  586. {datas.studentName}}</view>
  587. <view class='class'>{
  588. {datas.gradeName}} {
  589. {datas.className}}</view>
  590. </view>
  591. <view class='kuang'>
  592. <view class='ming'>
  593. <view class='aa'>{
  594. {datas.ranking}}</view>
  595. <view class='mm'>名</view>
  596. </view>
  597. <view class='ban'>班级早到榜</view>
  598. </view>
  599. <!-- hidden="{
  600. {currentTab == 1}}" -->
  601. <view>
  602. <canvas class="canvas" canvas-id="ringCanvas" hidden="{
  603. {currentTab == 1}}"></canvas>
  604. </view>
  605. <view class='itemyy'>
  606. <view class='ra'>
  607. <view class='shuzi'>{
  608. {datas.normalNum}}</view>
  609. <view class='zi'>准时</view>
  610. </view>
  611. <view class='ra'>
  612. <view class='shuzi'>{
  613. {datas.beLateNum}}</view>
  614. <view class='zi'>迟到</view>
  615. </view>
  616. <view class='ra'>
  617. <view class='shuzi'>{
  618. {datas.leaveNum}}</view>
  619. <view class='zi'>请假</view>
  620. </view>
  621. </view>
  622. </view>
  623. <view class='hr'></view>
  624. <view class='bottom'>
  625. <view class='jb'>
  626. <image src='/images/List.png' style='width: 50rpx; height: 50rpx;'></image>
  627. </view>
  628. <view class='pic'>
  629. <view class='r' bindtap='zaodao'>
  630. <view class='bei'>
  631. <view class='text'>{
  632. {zao}}</view>
  633. </view>
  634. <view class='zi'>早到榜</view>
  635. </view>
  636. <view class='r' bindtap='chidao'>
  637. <view class='bei'>
  638. <view class='text'>{
  639. {chi}}</view>
  640. </view>
  641. <view class='zi'>迟到榜</view>
  642. </view>
  643. <view class='r' bindtap='qifen'>
  644. <view class='bei'>
  645. <view class='text'>{
  646. {qifen}}</view>
  647. </view>
  648. <view class='zi'>勤奋榜</view>
  649. </view>
  650. </view>
  651. </view>
  652. <!-- </swiper-item> -->
  653. </view>
  654. <!-- <swiper-item> -->
  655. <view class="main {
  656. {selected1?'show':'hidden'}}">
  657. <view class='date'>
  658. <picker mode="date" value="{
  659. {date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1" fields="month">
  660. <view>
  661. <{
  662. {util.sub1(date1)}}> 统计
  663. </view>
  664. </picker>
  665. </view>
  666. <!-- 次数 -->
  667. <view class='bg'>
  668. <view class="item">
  669. <view class="title">出勤天数</view>
  670. <view class="detail2">
  671. <text>{
  672. {attendDays}}天 ∨</text>
  673. </view>
  674. </view>
  675. </view>
  676. <view class='bg'>
  677. <view class="iteming">
  678. <view class="title">请假次数</view>
  679. <view class="detail2">
  680. <text>{
  681. {lateTimes}}次 ∨</text>
  682. </view>
  683. </view>
  684. </view>
  685. <view class='bg'>
  686. <view class="item">
  687. <view class="title">迟到次数</view>
  688. <view class="detail2">
  689. <text>{
  690. {leaveEarlyTimes}}次 ∨</text>
  691. </view>
  692. </view>
  693. </view>
  694. <view class='bg'>
  695. <view class="iteming">
  696. <view class="title">缺少打卡</view>
  697. <view class="detail2">
  698. <text>{
  699. {unusualTimes}}次 ∨</text>
  700. </view>
  701. </view>
  702. </view>
  703. <!-- </swiper-item>
  704. </swiper> -->
  705. </view>
  706. <wxs module="util">
  707. var sub = function(val) {
  708. return val.substring(0, 10)
  709. }
  710. var sub1 = function(val) {
  711. return val.substring(0, 7)
  712. }
  713. module.exports.sub1 = sub1;
  714. module.exports.sub = sub;
  715. </wxs>

在这里插入图片描述
tab切换时,图表显示错乱

  1. <canvas class="kcanvas" canvas-id="ringCanvas" hidden="{
  2. {currentTab == 1}}"></canvas>
  3. <view hidden="{
  4. {currentTab !== 1}}" id="one" class="currentPage">
  5. <view class="containerSales" wx: if="{
  6. {currentTab === 1}}">
  7. <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
  8. {ecSales}}"></ec-canvas>
  9. </view>
  10. </view>
  11. ring chart
  12. new wxCharts({
  13. canvasId: 'ringCanvas',
  14. type: 'ring',
  15. series: [{
  16. name: '成交量1',
  17. data: 15,
  18. }, {
  19. name: '成交量2',
  20. data: 35,
  21. }, {
  22. name: '成交量3',
  23. data: 78,
  24. }, {
  25. name: '成交量4',
  26. data: 63,
  27. }],
  28. width: 320,
  29. height: 200,
  30. dataLabel: false
  31. });

在这里插入图片描述

js当中使用require引入即可:

  1. let Charts = require('./../../utils/wxcharts.js');

一般以iPhone6为标准进行设计

  1. /* 例如设计图尺寸为320 x 300 */
  2. .canvas {
  3. width: 640px;
  4. height: 600px;
  5. transform: scale(0.5)
  6. }
  7. new Charts({
  8. animation: true,
  9. canvasId: 'canvas5',
  10. type: 'ring',
  11. extra: {
  12. ringWidth: 10,//圆环的宽度
  13. pie: {
  14. offsetAngle: -45//圆环的角度
  15. }
  16. },
  17. title: {
  18. name: '70%',
  19. color: '#7cb5ec',
  20. fontSize: 25
  21. },
  22. subtitle: {
  23. name: '收益率',
  24. color: '#666666',
  25. fontSize: 15
  26. },
  27. series: [{
  28. name: '成交量1',
  29. data: 15,
  30. stroke: false
  31. }, {
  32. name: '成交量2',
  33. data: 35,
  34. stroke: false
  35. }, {
  36. name: '成交量3',
  37. data: 78,
  38. stroke: false
  39. }, {
  40. name: '成交量4',
  41. data: 63,
  42. stroke: false
  43. }],
  44. disablePieStroke: true,
  45. width: 640,
  46. height: 200,
  47. dataLabel: true,
  48. legend: false,
  49. padding: 0
  50. });

在这里插入图片描述

  1. /* 环形 */
  2. .canvas {
  3. z-index: 1;
  4. position: absolute;
  5. left: 32px;
  6. top: 60px;
  7. height: 350rpx;
  8. }
  9. new wxCharts({
  10. canvasId: 'ringCanvas',
  11. type: 'ring',
  12. legend: false,
  13. extra: {
  14. ringWidth: 15, //圆环的宽度
  15. pie: {
  16. offsetAngle: -45 //圆环的角度
  17. }
  18. },
  19. series: [{
  20. data: res.data.data.normalNum,
  21. }, {
  22. data: res.data.data.beLateNum,
  23. }, {
  24. data: res.data.data.leaveNum,
  25. }, {
  26. data: res.data.data.uncheckedNum,
  27. }],
  28. width: 320,
  29. height: 200,
  30. dataLabel: false
  31. });
  32. switchNav: function(event) {
  33. var cur = event.currentTarget.dataset.current;
  34. if (this.data.currentTab == cur) { return false; }
  35. else {
  36. this.setData({
  37. currentTab: cur
  38. })
  39. }
  40. if(cur==1){
  41. this.setData({
  42. init_datas: nz_data,
  43. currentTab1: 1
  44. })
  45. var tmp_datas = this.data.init_datas;
  46. console.dir(tmp_datas);
  47. this.setData({
  48. nz_datas: tmp_datas,
  49. class:1
  50. })
  51. }
  52. if(cur==2){
  53. this.setData({
  54. init_datas1: man_data,
  55. currentTab1: 1
  56. })
  57. var tmp_datas = this.data.init_datas1;
  58. console.dir(tmp_datas);
  59. this.setData({
  60. nz_datas: tmp_datas,
  61. class:2
  62. })
  63. }
  64. },
  65. switchNav1: function (event) {
  66. var cur = event.currentTarget.dataset.curr;
  67. console.log("switchNav1_curr="+cur);
  68. console.log("class=" + this.data.class);
  69. if (this.data.currentTab1 == cur) { return false; }
  70. else {
  71. this.setData({
  72. currentTab1: cur
  73. })
  74. }
  75. if(cur==1){
  76. if(this.data.class==1){
  77. var tmp_datas = this.data.init_datas;
  78. this.setData({
  79. nz_datas: tmp_datas
  80. })
  81. }
  82. if (this.data.class == 2) {
  83. var tmp_datas = this.data.init_datas1;
  84. this.setData({
  85. nz_datas: tmp_datas
  86. })
  87. }
  88. }

实现滑动tab

  1. <view>
  2. <view class="swiper-tab">
  3. <view class="swiper-tab-list {
  4. {tab==0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">图文</view>
  5. <view class="swiper-tab-list {
  6. {tab==1 ? 'on' : ''}}" data-current="1" bindtap="tab_click">产品</view>
  7. </view>
  8. <swiper current="{
  9. {tab}}" class="swiper-box" duration="300" style="height:{
  10. {winHeight - 31}}px" bindchange="tab_slide">
  11. <swiper-item>
  12. 图文
  13. </swiper-item>
  14. <swiper-item>
  15. 产品
  16. </swiper-item>
  17. </swiper>
  18. </view>
  19. Page({
  20. data: {
  21. tab: 0
  22. },
  23. tab_slide: function (e) {//滑动切换tab
  24. var that = this;
  25. that.setData({ tab: e.detail.current });
  26. },
  27. tab_click: function (e) {//点击tab切换
  28. var that = this;
  29. if (that.data.tab === e.target.dataset.current) {
  30. return false;
  31. } else {
  32. that.setData({
  33. tab: e.target.dataset.current
  34. })
  35. }
  36. },
  37. })

发表评论

表情:
评论列表 (有 0 条评论,397人围观)

还没有评论,来说两句吧...

相关阅读

    相关 tab切换问题

        tab切换延时问题,困扰我一整天,一般tab切换效果鼠标快速划过后就会闪的特别厉害,我就想加个延时效果,于是用上了settimeout方法,结果发现又出现了另外一个问题