Tag 微信小程序 | 养鱼技术交流博客

wxScroll-swiper

Author: 孙一钫Date: 2021/3/15Category: Tag: 微信小程序

在这里插入图片描述

要点swiper内部套scroll-view

注意： 1.scroll竖直滚动高度不能给百分比要给px/rpx 2.swiper内部item posiiton定位高度100% 3.swiper高度要给定值 4.如果横向滚动也要给水平的宽度

代码

xml

    <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
      <swiper-item class="tab-content">
        <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
          <view class="cont">
            <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
              <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
            </view>
          </view>
        </scroll-view>

      </swiper-item>
      <swiper-item class="tab-content">
        <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}">
          <view class="cont">
            <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
              <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>

微信小程序常用API

Author: 孙一钫Date: 2021/3/12Category: Tag: 微信小程序

1.wx:for

    <view  class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx">
      <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card> 
    </view>

vueApiControl

Author: 孙一钫Date: 2021/3/15Category: Tag: 微信小程序

首先根据接口写好对应页面的请求

内容如图尽量保证js文件名称与页面文件名称相同（易于查找）在这里插入图片描述

根据文件目录动态引入/导出接口

后台管理系统权限管理

Author: 孙一钫Date: 2021/3/15Category: Tag: 微信小程序

Vue-element-admin permission

微信小程序输入框上移问题

Author: 孙一钫Date: 2021/3/5Category: Tag: JavaScript, 微信小程序

微信小程序输入框上移问题

缺陷：输入框顶起整个页面包括自定义顶栏
解决方式：给input设置adjust-position="{{false}}"后自定义input高度
wxml

  <view class="submit" style="bottom:{{bottom}}px">
    <view class="serch-view">
    <input bindconfirm="toSubmit"
          value="{{code}}"
          bindfocus="inputFocus"
          bindblur="inputBlur"
          adjust-position="{{false}}"
          class="block-main"
          type="text"
          confirm-type="go"
          cursor-spacing="100" class="course-search"></input>
    <view bindtap="search"  class="search-button">发 送</view>
  </view>

axios响应拦截器错误处理及思想

Author: 孙一钫Date: 2021/5/17Category: Tag: 微信小程序

axios response

微信小程序上手常用功能

Author: LinvKeyDate: 2021/3/12Category: Tag: JavaScript, Vue, 微信小程序

快速上手微信小程序用到的语法