diff --git a/docs/complier-mode.mdx b/docs/complier-mode.mdx
index 54ccba04c27e..b100b8a15ed9 100644
--- a/docs/complier-mode.mdx
+++ b/docs/complier-mode.mdx
@@ -127,7 +127,7 @@ function Item (props) {
即把组件的展示，放到子组件中去进行判断。
### 使用 jsx 变量
-直接使用 jsx 变量，在半编译的情况下是会，如以下代码：
+直接使用 jsx 变量，在半编译的情况下是会报错，如以下代码：
```jsx
export default function Index () {
@@ -196,164 +196,438 @@ export default function Index () {
}
```
+## 半编译预处理
+:::info
+`4.0.7` 开始支持
+:::info
+
+允许在组件中自定义的以 `render` 开头的函数，来实现组件内部的模块化能力。
+### 使用方法
+1. 函数必须是 `render` 开头
+2. 函数 `return` 的第一个标签必须带上 `compileMode="subRenderFn"` 属性
+
+### 限制
+1. `render` 开头的函数暂不支持拥有自己的作用域代码
+2. 传递给 `render` 开头的函数的参数，现阶段必须是一个变量
+
+### 例子
+```jsx
+const ComponentA = (props) => {
+ const { data1, data2 } = props
+ const renderXxxx = (props1, props2, ...) => {
+ //1. 这里暂不支持编码，涉及到作用域的问题
+ return (
+ //return 的第一个标签必须带上 compileMode="subRenderFn" 属性
+
+ {props1}
+ {props2}
+ ...
+
+ )
+ }
+
+ return (
+
+ // 2. props 暂时只支持传递变量，涉及到变量替换的问题
+ {renderXxxx(data1, data2)}
+
+ )
+}
+```
+
+
## 最佳实践
总的来说，要最大限度的发挥半编译模式的优势，就是要把尽量把静态节点，尽可能的写到同一个 jsx 里面去。自我检查的最简单的方式就是看看编译后的模版数量是否足够少，每个模版是否包含了足够多节点。
-如果一个 template 只是包含了少数节点，那其实无法带来很大的提升。如以下代码：
+如果一个 template 只是包含了少数节点，那其实无法带来很大的提升。可以结合半编译预处理，使用组件内的 `render` 开头的函数，进行模块化拆分 如以下代码：
```jsx
-import { View, Image, Text } from '@tarojs/components'
+import { View, Image, Text } from "@tarojs/components";
+
+import './index.scss'
const dataList = [
- {
- src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/35189432_1009333_ED.jpg?defaultImage=NoImageAvailableInternal",
- title: "这是标题1",
- subTitle: "这是子标题1",
- tag: ["标签1", "标签2", "标签3"],
- des: "这是描述1",
- subDes:'这是子描述1',
- prices: {
- normal: {
- int: '86',
- float: '88'
- },
- line: 100
- }
- },
- {
- src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/62866950_989218_ED.jpg?defaultImage=NoImageAvailableInternal",
- title: "这是标题2",
- subTitle: "这是子标题2",
- tag: ["标签1", "标签2", "标签3"],
- des: "这是描述2",
- subDes:'这是子描述2',
- prices: {
- normal: {
- int: '60',
- float: '70'
- },
- line: 100
- }
- },
- {
- src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/62507586_989743_ED_M.jpg?defaultImage=NoImageAvailableInternal",
- title: "这是标题3",
- subTitle: "这是子标题3",
- tag: ["标签1", "标签2", "标签3"],
- des: "这是描述3",
- subDes:'这是子描述3',
- prices: {
- normal: {
- int: '85',
- float: '10'
- },
- line: 100
- }
- },
- {
- src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/33263465_997778_ED.jpg?defaultImage=NoImageAvailableInternal",
- title: "这是标题4",
- subTitle: "这是子标题4",
- tag: ["标签1", "标签2", "标签3"],
- des: "这是描述4",
- subDes:'这是子描述4',
- prices: {
- normal: {
- int: '8',
- float: '88'
- },
- line: 100
- }
- },
- {
- src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/60957401_1023440_ED.jpg?defaultImage=NoImageAvailableInternal",
- title: "这是标题5",
- subTitle: "这是子标题5",
- tag: ["标签1", "标签2", "标签3"],
- des: "这是描述5",
- subDes:'这是子描述5',
- prices: {
- normal: {
- int: '77',
- float: '88'
- },
- line: 100
- }
- }
+ {
+ src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/35189432_1009333_ED.jpg?defaultImage=NoImageAvailableInternal",
+ title: "这是标题1",
+ subTitle: "这是子标题1",
+ tag:[
+ {
+ name: "标签1",
+ type: 1
+ },
+ {
+ name: "标签2",
+ type: 2
+ },
+ {
+ name: "标签3",
+ type: 3
+ }
+ ],
+ des: "这是描述1",
+ subDes:'这是子描述1',
+ prices: {
+ normal: {
+ int: '86',
+ float: '88'
+ },
+ line: 100
+ }
+ },
+ {
+ src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/62866950_989218_ED.jpg?defaultImage=NoImageAvailableInternal",
+ title: "这是标题2",
+ subTitle: "这是子标题2",
+ tag:[
+ {
+ name: "标签1",
+ type: 1
+ },
+ {
+ name: "标签2",
+ type: 2
+ },
+ {
+ name: "标签3",
+ type: 3
+ }
+ ],
+ tagType: 2,
+ des: "这是描述2",
+ subDes:'这是子描述2',
+ prices: {
+ normal: {
+ int: '60',
+ float: '70'
+ },
+ line: 100
+ }
+ },
+ {
+ src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/62507586_989743_ED_M.jpg?defaultImage=NoImageAvailableInternal",
+ title: "这是标题3",
+ subTitle: "这是子标题3",
+ tag:[
+ {
+ name: "标签1",
+ type: 1
+ },
+ {
+ name: "标签2",
+ type: 2
+ },
+ {
+ name: "标签3",
+ type: 3
+ }
+ ],
+ des: "这是描述3",
+ subDes:'这是子描述3',
+ prices: {
+ normal: {
+ int: '85',
+ float: '10'
+ },
+ line: 100
+ }
+ },
+ {
+ src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/33263465_997778_ED.jpg?defaultImage=NoImageAvailableInternal",
+ title: "这是标题4",
+ subTitle: "这是子标题4",
+ tag:[
+ {
+ name: "标签1",
+ type: 1
+ },
+ {
+ name: "标签2",
+ type: 2
+ },
+ {
+ name: "标签3",
+ type: 3
+ }
+ ],
+ des: "这是描述4",
+ subDes:'这是子描述4',
+ prices: {
+ normal: {
+ int: '8',
+ float: '88'
+ },
+ line: 100
+ }
+ },
+ {
+ src: "https://media.tiffany.cn/is/image/Tiffany/EcomBrowseM/60957401_1023440_ED.jpg?defaultImage=NoImageAvailableInternal",
+ title: "这是标题5",
+ subTitle: "这是子标题5",
+ tag:[
+ {
+ name: "标签1",
+ type: 1
+ },
+ {
+ name: "标签2",
+ type: 2
+ },
+ {
+ name: "标签3",
+ type: 3
+ }
+ ],
+ des: "这是描述5",
+ subDes:'这是子描述5',
+ prices: {
+ normal: {
+ int: '77',
+ float: '88'
+ },
+ line: 100
+ }
+ }
]
-export default function Index () {
- return (
-
- {
- new Array(100).fill(0).map((_, index)=>- )
- }
-
- )
+const Item = (props) =>{
+ const { itemIndex } = props
+ const sectionIndex = itemIndex % 5
+ const data = dataList[sectionIndex]
+ const { tag, src, title, subTitle, des, subDes, prices } = data
+
+ const renderCard = ()=> {
+ return (
+
+ {renderImage()}
+ {renderContent()}
+
+ )
+ }
+ const renderImage = ()=> {
+ return (
+
+
+
+ )
+ }
+
+ const renderContent = () =>{
+ return (
+
+ {renderTitle()}
+ {renderDes()}
+ {renderTags(tag)}
+ {renderPrices()}
+ {renderBtn()}
+
+ )
+
+ }
+
+ const renderTitle = () =>{
+ return (
+
+
+ {title}
+
+
+ {subTitle}
+
+
+ )
+ }
+
+
+ const renderDes = () => {
+ return (
+
+
+ {des}
+
+
+ {subDes}
+
+
+ )
+ }
+
+ const renderPrices = () =>{
+ return (
+
+
+ {prices.normal.int}
+ .{prices.normal.float}
+
+
+ {prices.line}
+
+
+ )
+ }
+
+ const renderTag1 = (tag, key)=>{
+ return {tag}
+ }
+ const renderTag2 = (tag, key)=>{
+ return {tag}
+ }
+ const renderTag3 = (tag, key)=>{
+ return {tag}
+ }
+
+ const renderTags = (tags)=>{
+ return (
+ {
+ tags.map((e, index)=>{
+ const { name, type } = e
+ return (
+ <>
+ {
+ type === 1 ? renderTag1(name, index) :
+ type === 2 ? renderTag2(name, index) :
+ type === 3 ? renderTag3(name, index) : null
+ }
+
+ )
+ })
+ }
+ )
+ }
+
+ const renderBtn = ()=>{
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+ {renderCard()}
+
+ )
+
}
-const Item = (props) =>{
- const { itemIndex } = props
- const selectIndex = itemIndex % 5
- const data = dataList[selectIndex]
- return (
-
-
-
-
-
-
-
-
- {data.title}
-
-
- {data.subTitle}
-
-
-
-
-
- {data.des}
-
-
- {data.subDes}
-
-
-
-
- {
- data.tag.map((e, index)=>
- {e}
- )
- }
-
-
-
- {data.prices.normal.int}
- .{data.prices.normal.float}
-
-
- {data.prices.line}
-
-
-
-
-
-
-
-
-
-
-
- 搞一个嵌套五层的浮动元素
-
-
-
-
-
-
-
-
- )
+export default Item
+```
+
+```css
+.item {
+ &-header{
+ background-color: black;
+ color: white;
+ display: flex;
+ align-items: center;
+ height: 100%;
+ border: 1px red solid;
+ z-index: 10;
+ box-sizing: border-box;
+ }
+ &-body{
+ display: flex;
+ align-items: center;
+ border: 1px red solid;
+ box-sizing: border-box;
+ &-wrap {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ .image-wrap {
+ width: 70px;
+ height: 70px;
+ }
+
+ .body-left {
+ flex: 1;
+ position: relative;
+ margin-left: 20px;
+ .title-wrap {
+ display: flex;
+ align-items: center;
+ .sub-title {
+ font-size: 14px;
+ color: gray;
+ margin-left: 5px;
+ }
+ .title {
+ font-size: 20px;
+ }
+ }
+
+ .des-wrap {
+ display: flex;
+ .sub-des {
+ margin-left: 4px;
+ font-size: 12px;
+ color: gray;
+ }
+ .des {
+ font-size: 16px;
+ }
+ }
+
+
+ .tag-wrap {
+ .tag1 {
+ border: 1px gray solid;
+ border-radius: 1px;
+ margin-right: 2px;
+ font-size: 12px;
+ }
+ .tag2 {
+ border: 1px red dashed;
+ border-radius: 1px;
+ margin-right: 2px;
+ font-size: 12px;
+ }
+ .tag3 {
+ border: 1px green solid;
+ border-radius: 1px;
+ margin-right: 2px;
+ font-size: 12px;
+ }
+ display: flex;
+ }
+ .price {
+ &-wrap{
+ display: flex;
+ align-items: flex-end;
+ }
+
+ &-normal {
+ color: red;
+ display: flex;
+ align-items: flex-end;
+ &-int{
+ line-height: 12px;
+ font-size: 12px;
+ }
+ &-float{
+ line-height: 10px;
+ font-size: 10px;
+ }
+ }
+ &-line {
+ line-height: 10px;
+ font-size: 10px;
+ color: gray;
+ text-decoration: line-through;
+ }
+ }
+ .add {
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ .add-image{
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ }
+ }
+ }
}
```
\ No newline at end of file
diff --git a/docs/components/viewContainer/swiper.md b/docs/components/viewContainer/swiper.md
index 47f27044fd83..8a06de76b7f4 100755
--- a/docs/components/viewContainer/swiper.md
+++ b/docs/components/viewContainer/swiper.md
@@ -121,7 +121,7 @@ class App extends Component {
| onTransition | `CommonEventFunction` | | 否 | swiper-item 的位置发生改变时会触发 transition 事件 |
| onAnimationFinish | `CommonEventFunction` | | 否 | 动画结束时会触发 animationfinish 事件 |
| onAnimationEnd | `CommonEventFunction` | | 否 | 动画结束时会触发 animationEnd 事件 |
-
+| effectsProps | `TEffectsProps` | | 否 | [swiperjs](https://swiperjs.com/swiper-api#param-effect) 动效相关的属性
### API 支持度
| API | 微信小程序 | 百度小程序 | 支付宝小程序 | 抖音小程序 | QQ 小程序 | 京东小程序 | H5 | React Native | Harmony | Harmony hybrid |
@@ -161,6 +161,7 @@ class App extends Component {
| SwiperProps.onTransition | ✔️ | | ✔️ | ✔️ | ✔️ | | | | | |
| SwiperProps.onAnimationFinish | ✔️ | ✔️ | | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | | ✔️ |
| SwiperProps.onAnimationEnd | | | ✔️ | | | | | | | |
+| SwiperProps.effectsProps | | | | | | | ✔️ | | | |
### TChangeSource
@@ -205,3 +206,15 @@ class App extends Component {
| --- | --- | --- |
| dx | `number` | X 坐标 |
| dy | `number` | Y 坐标 |
+
+### TEffectsProps
+
+| 参数 | 类型 | 必填 | 说明 |
+| --- | --- | :---: | --- |
+| effect | `string` | 是 | 可以是 'fade', 'cube', 'coverflow', 'flip', 'creative' 或 'cards' |
+| coverflowEffect | `object` | 否 | effect 为 'coverflow' 时的额外参数，详见 [swiperjs coverflow](https://swiperjs.com/swiper-api#param-coverflowEffect) |
+| creativeEffect | `object` | 否 | effect 为 'creative' 时的额外参数，详见 [swiperjs creative](https://swiperjs.com/swiper-api#param-creativeEffect) |
+| cardsEffect | `object` | 否 | effect 为 'cards' 时的额外参数，详见 [swiperjs cards](https://swiperjs.com/swiper-api#param-cardsEffect) |
+| fadeEffect | `object` | 否 | effect 为 'fade' 时的额外参数，详见 [swiperjs fade](https://swiperjs.com/swiper-api#param-fadeEffect) |
+| flipEffect | `object` | 否 | effect 为 'flip' 时的额外参数，详见 [swiperjs flip](https://swiperjs.com/swiper-api#param-flipEffect) |
+| cubeEffect | `object` | 否 | effect 为 'cube' 时的额外参数，详见 [swiperjs cube](https://swiperjs.com/swiper-api#param-cubeEffect) |
diff --git a/docs/optimized.mdx b/docs/optimized.mdx
index ed21446816c3..e2302395a38c 100644
--- a/docs/optimized.mdx
+++ b/docs/optimized.mdx
@@ -12,6 +12,27 @@ Taro 3 为了兼容 React、Vue 等 Web 开发框架，在运行时对浏览器
详情请看[半编译模式](./complier-mode)。
+## 模版不使用 XS
+:::info
+`4.0.7` 开始支持
+:::info
+
+模版的拼接使用 xs，会有时间上的损耗，如果要追求极致的性能，可以禁用在模版中使用 xs，但这会导致包体积变大。
+用法：
+
+在 Taro 编译配置中禁用模版 xs：
+
+```js title="config/index.js"
+const config = {
+ mini: {
+ experimental: {
+ useXsForTemplate: false
+ }
+ }
+ // ...
+}
+```
+
## 使用 WXS
:::info