学习周记 Week 15

最新推荐文章于 2024-01-14 16:51:08 发布

Daisy47199390

最新推荐文章于 2024-01-14 16:51:08 发布

阅读量168

点赞数

分类专栏：学习周记

本文链接：https://blog.csdn.net/weixin_47199390/article/details/118283095

版权

学习周记专栏收录该内容

15 篇文章

订阅专栏

本周学习了微信小程序的开发，包括实现点击标签切换界面的功能，通过添加.js文件代码实现；使用滚动选择器，并处理bindPickerChange事件；以及在.js和.wxml文件中添加代码，实时显示输入文字的剩余字数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.学习目标

微信小程序初步开发

2.学习内容

2.1 点击标签切换界面

在.js文件中添加代码1

(property) data: {
more_list: never[];
position: number[];
nothing: boolean;
showtab: number;
showtabtype: string;
tabnav: {};
testdataall: never[];
testdata1: never[];
testdata2: never[];
testdata3: never[];
testdata4: never[];
... 4 more ...;
marginleft: number;
} & {
...;
}

在.js文件中添加代码2：

 this.setData({
      tabnav:{
        tabnum:5,
        tabitem:[
          {
            "id":1,
            "type":"A",
            "text":"文二"
          },
          {
            "id":2,
            "type":"B",
            "text":"文三"
          },
          {
            "id":3,
            "type":"C",
            "text":"工二"
          },
          {
            "id":4,
            "type":"D",
            "text":"食堂"
          },
          {
            "id":5,
            "type":"E",
            "text":"操场"
          },
        ] }
        })
        this.fetchTabData(0);

成果：
在这里插入图片描述

2.2 滚动选择器

bindPickerChange
成果：
在这里插入图片描述

2.3 剩余输入字数

在.js文件中添加代码

textChange(e) {
    const rest_num = 200 - e.detail.value.length;
    this.setData({
      text_form: e.detail.value,
      rest_num: rest_num
    });
  },

·在.wxml文件中添加代码

<span class='tips'>最多输入200字，您还可输入{{rest_num}}字</span>

成果：
在这里插入图片描述