数据驱动滑动门

秒速五厘米 2023-07-17 04:39 17阅读 0赞

<view class="door">
      <view class="title">
        <block wx:for="{
       {doorTitle}}" wx:key="idx">
          <view style="font-weight:{
       {currentIndex===index?'bold':'none'}}" class="color:red; {
       {currentIndex===index?'currentView':''}} gongyi" catchtap="changeDoor" data-door-index="{
       {index}}">{
       {item}}</view>
        </block>
      </view>
      <view class="content" style=" display:{
       {currentIndex===0?'block':'none'}}">
        0
      </view>
      <view class="content" style="display:{
       {currentIndex===1?'block':'none'}}">
        1
      </view>
      <view class="content" style="display:{
       {currentIndex===2?'block':'none'}}">
        2
      </view>
      <view class="content" style="display:{
       {currentIndex===3?'block':'none'}}">
        3
      </view>
      <view class="content" style="display:{
       {currentIndex===4?'block':'none'}}">
        4
      </view>
    </view>

.title{
    width: 750rpx;height: 100rpx;
    border-bottom: 1px solid #dddddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    }

data: {
        doorTitle: ["访谈", "新闻", "公益", "会议", "饮食"],
        currentIndex: 0
      },
      /**滑动门的触碰事件 */
      changeDoor(event) {
        var doorIndex = event.currentTarget.dataset.doorIndex;
        this.setData({
          currentIndex: doorIndex
        })
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

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

相关阅读

相关下拉滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

悠悠/ 2024年02月17日 22:38/ 0 赞/ 84 阅读

相关数据驱动滑动门

<view class="door"> <view class="title"> <block wx:

秒速五厘米/ 2023年07月17日 04:39/ 0 赞/ 18 阅读

相关 CSS-滑动门技术

所谓滑动们技术就是元素内容增加时背景图片也跟着变宽（不会变形），不需要设置盒子的宽，不需要修改背景图大小；想要使用滑动门技术图片要足够宽才行 <!-- 基本 DOM

迷南。/ 2023年06月08日 06:34/ 0 赞/ 77 阅读

相关仿微信导航栏滑动门练习

效果测试 ![在这里插入图片描述][20200624163332152.gif] 代码： <!DOCTYPE html> <html lang="en">

电玩女神/ 2023年02月20日 07:20/ 0 赞/ 191 阅读

相关 js实现滑动门效果

滑动门效果： ![初始][SouthEast] ![第三道门打开][SouthEast 1] 原理：一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个

待我称王封你为后i/ 2022年09月29日 13:59/ 0 赞/ 204 阅读

相关实用js+css滑动门导航菜单

实用js+css滑动门导航菜单 <html> <head> <title>简易实用，滑动门</title> <meta http-equiv=

冷不防/ 2022年09月21日 15:27/ 0 赞/ 257 阅读

相关 jQuery选项卡滑动门Tabs插件

[下载地址/images/20220828/8d4b0db7bc9b4b73abc30ed44d314b7a.png![icon-default.png?t=L892][ico

灰太狼/ 2022年09月11日 04:09/ 0 赞/ 240 阅读

相关简单滑动门！~~~~

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Typ

电玩女神/ 2022年08月23日 14:49/ 0 赞/ 148 阅读

相关迅雷面试第二题(采用滑动门)

今天上午把迅雷的第二题做了些，感觉还是有些收获的，发现了一些问题，先截个图 ![Image 1][] <!DOCTYPE HTML PUBLIC "-//

左手的ㄟ右手/ 2022年06月13日 10:09/ 0 赞/ 181 阅读

相关 Linux驱动移植入门说明

This post explains how to cross-compile the Linux kernel and Backport driver sources aga

太过爱你忘了你带给我的痛/ 2021年10月25日 13:38/ 0 赞/ 1375 阅读