2023-8-3

编程语言 2023-08-22 18:48:15 阅读次数: 0

底部导航栏--页面切换

  • 为每一个底部按钮添加界面

每个界面包含一下三个文件（直接复制即可）

最终

  •  设置首页index

更改index包下的index.config.js，设置标题名称

 在app.config.js中设置路由

 在底部导航栏的index文件中设置跳转函数

  •  其它三个界面类似上边的操作

轮播图

  • 在首页界面的index中加入轮播图代码
<View className='index'>
      <Swiper
        className='swiper'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        vertical={false}
        circular
        indicatorDots
        autoplay>
        <SwiperItem className='swiper-item'>
          <image src='http://43.139.94.243/images/ban1.jpg'></image>
        </SwiperItem>
        <SwiperItem className='swiper-item'>
          <image src='http://43.139.94.243/images/ban2.jpg'></image>
        </SwiperItem>
        <SwiperItem className='swiper-item'>
          <image src='http://43.139.94.243/images/ban3.jpg'></image>
        </SwiperItem>
      </Swiper>
  •  在index.scss中调整图片样式

  • 效果 

循环生成菜单及对应内容

  • catagory目录下的index.jsx文件

当前数据一级写死，引用了TaroUI组件


import './index.scss'
import TaBar from '../common/index'
import {Text, View} from "@tarojs/components";
import {Component} from "react";
import { AtTabs, AtTabsPane } from 'taro-ui'

export default class Index extends Component{
  
  constructor() {
    super();
    this.state={
      current:0,
      br:'\n',
      firstCategoryArr: [
        {id: 1, title: "手机产品"},
        {id: 2, title: "时尚耳机"},
        {id: 3, title: "MINI相机"},
        {id: 4, title: "电脑硬盘"},
        {id: 5, title: "鼠标键盘"},
        {id: 6, title: "平板电脑"},
        // {id: 7, title: "手机产品"},
        // {id: 8, title: "时尚耳机"},
        // {id: 9, title: "MINI相机"},
        // {id: 10, title: "电脑硬盘"},
        // {id: 11, title: "鼠标键盘"},
        // {id: 12, title: "平板电脑"},
        // {id: 13, title: "手机产品"},
        // {id: 14, title: "时尚耳机"},
        // {id: 15, title: "MINI相机"},
        // {id: 16, title: "电脑硬盘"},
        // {id: 17, title: "鼠标键盘"},
        // {id: 18, title: "平板电脑"},
      ],
      secondCategoryArr: [
        {pId: 1, id: 111, title: "手机产品1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 1, id: 112, title: "手机产品2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 1, id: 113, title: "手机产品3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 1, id: 115, title: "手机产品4",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 1, id: 116, title: "手机产品5",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 2, id: 211, title: "时尚耳机1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'},
        {pId: 2, id: 212, title: "时尚耳机2",img: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png'},
        {pId: 2, id: 213, title: "时尚耳机3",img: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png'},
        {pId: 3, id: 311, title: "MINI相机1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 3, id: 312, title: "MINI相机2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 3, id: 313, title: "MINI相机3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 4, id: 411, title: "电脑硬盘1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'},
        {pId: 4, id: 412, title: "电脑硬盘2",img: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png'},
        {pId: 4, id: 413, title: "电脑硬盘3",img: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png'},
        {pId: 5, id: 511, title: "鼠标键盘1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 5, id: 512, title: "鼠标键盘2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 5, id: 513, title: "鼠标键盘3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 6, id: 611, title: "平板电脑1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 6, id: 612, title: "平板电脑2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 6, id: 613, title: "平板电脑3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
      ]

    }
  }

  handleClick=(index)=>{
    this.setState({
      current:index
    })
  }

  render() {
    return (
      <View className='catagory'>
        <AtTabs
          current={this.state.current}
          scroll
          animated={false}
          height='250px'
          tabDirection='vertical'
          tabList={this.state.firstCategoryArr}
          onClick={this.handleClick.bind(this)}>
          {
            this.state.firstCategoryArr.map((firstLeveMenu)=>{
              return(
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={0} className='tabsPane'>
                  {
                    this.state.secondCategoryArr.map((secondLeveMenu)=>{
                      //判断二级菜单的pid==一级菜单id
                      if (firstLeveMenu.id==secondLeveMenu.pId){
                        return(
                          <View className='paneContent'>
                            <image src={secondLeveMenu.img} style='height:80px ; width:80px'></image>
                            <Text>{this.state.br}</Text>
                            <Text>{secondLeveMenu.title}</Text>
                          </View>
                        )
                      }
                    })
                  }
                </AtTabsPane>
              )
            })
          }
        </AtTabs>
        <TaBar current={1}></TaBar>
      </View>
    )
  }
}
  • 效果

  •  显示标题以及图片

在catagroy目录下index.scss中

.tabsPane{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.paneContent{
  text-align: center;
  font-size: 30px;
  border: 1px solid #DDDDDD;
  margin-bottom: 20px;
}
  •  效果

后端取到首页的数据

建立数据库

建立后端获取数据库中的数据

建立springBoot项目

 IDEA打开，配置application.properties文件


server.port=9000
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/16ban?useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456

mybatis.mapper-locations=classpath:mapper/*Mapper.xml

logging.level.com.example.weappdemo.mapper=DEBUG

将generatorConfig.xml放置于resource目录下，并完成配置

将Generator类置于weappdemo目录下，修改路径

利用Generator函数生成相关文件

 加入统一返回结果类

 增加控制器controller

小程序应用Taro中的request发送请求

官网中request的用法

 url需要用到花生壳

  •  复制域名地址

 对微信开发者工具可能报域名不合法问题

点击“详情”--“本地设置”---勾选“不校验合法域名”

效果

猜你喜欢

转载自blog.csdn.net/m0_53286358/article/details/132090434
8/3
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022